有什么方法可以从未知孩子的道具或状态变化中更新父母？

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功能，但这与该问题无关，只是不想让它引起混乱。

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