reactjs - 有没有办法从未知孩子的道具或状态变化中更新父母？

Question

让我们看看我们有一个父级，它可以有未知数量的未知组件的子级。在我的具体示例中，由于 dnd 列表顺序更改，我有一个具有绝对位置的下拉菜单。我有一个父母是这个 dnd 功能的提供者。我在父级上有一个 useEffect，它在每次更新时调用一个函数，它设置子级和父级的样式。这是它的样子：

const SortDrag = ({ children, onChange, onEnd }) => {

    const sortDragContainer = useRef();

    const setStyles = () => {
        let top = 0;

        const { children, style } = sortDragContainer.current;

        [ ...children ].forEach(child => {

            const { offsetHeight: height } = child;

            child.style.transform = `translateY(${top}px)`;

            top += height;
        });

        style.height = `${top}px`;
    };

    const Elements = children.map((child, i) => {
        const { id } = child.props || child;

        return (
            <SortDragElement id={id} order={i} key={id}>
                {child}
            </SortDragElement>
        );
    }).sort((a, b) => a.order - b.order);

    useEffect(() => {
        if (onChange) sortDragContainer.current.onChange = onChange;
        if (onEnd) sortDragContainer.current.onEnd = onEnd;
        if (reverse) sortDragContainer.current.reverse = reverse;
    }, []);

    useEffect(() => { setStyles(); });

    return (
        <div
            className="sort-drag-container"
            ref={sortDragContainer}
        >
            {Elements}
        </div>
    );
};

export default SortDrag;

我在一个单独的文件中有事件监听器来处理 dnd 功能，但它与这个问题无关，只是不希望这引起混乱。

每当其中一个子组件发生更改时，我想更新父组件。

标签： reactjs