React中如何管理列表组件Props及实现批量折叠子组件？

我正在尝试创建一个ObjectList组件，该组件包含多个子组件。当前代码如下：

const MyList = ({childObjects}) => {
    [objects, setObjects] = useState(childObjects)

    ...

    return (
        <div>
            {childObjects.map((obj, idx) => (
                <ListChild
                    obj={obj}
                    key={idx}
                    collapsed={false}
                />
            ))}
        </div>
    )
}

export default MyList

每个子组件都拥有一个collapsed属性，用于切换其可见性。我希望在父组件层面添加一个「全部折叠」按钮，一次性修改所有子组件的collapsed属性，但不能将它们全部绑定到同一个状态。我曾考虑为每个子组件创建一个ref并组成列表进行遍历，但不确定这种设计是否合理。

请问如何引用动态生成的子组件列表并管理其状态？或者是否有更优的解决方案？

优先方案：用父组件状态统一管理子项折叠状态 #

React的核心设计是状态驱动UI，直接用ref操作子组件实例属于反模式，优先推荐通过状态管理实现需求，以下两种方式都能满足「单独控制+批量折叠」的要求：

方式1：给每个子对象附加折叠状态

如果允许修改原始数据结构，直接给每个子对象添加collapsed属性，既能保留独立状态，又能批量修改：

const MyList = ({childObjects}) => {
    // 初始化时为每个子对象添加collapsed默认状态
    const [objects, setObjects] = useState(() => 
        childObjects.map(obj => ({...obj, collapsed: false}))
    )

    // 全部折叠逻辑
    const handleCollapseAll = () => {
        setObjects(prev => prev.map(item => ({...item, collapsed: true})))
    }

    // 单个子项切换折叠状态
    const handleToggleSingle = (index) => {
        setObjects(prev => {
            const newList = [...prev]
            newList[index].collapsed = !newList[index].collapsed
            return newList
        })
    }

    return (
        <div>
            <button onClick={handleCollapseAll}>全部折叠</button>
            {objects.map((obj, idx) => (
                <ListChild
                    obj={obj}
                    key={idx}
                    collapsed={obj.collapsed}
                    onToggle={() => handleToggleSingle(idx)}
                />
            ))}
        </div>
    )
}

export default MyList

这种方式逻辑清晰，完全遵循React状态流转规则，状态变化自动触发UI更新，没有副作用。

方式2：用独立数组维护折叠状态

如果不想修改原始childObjects结构，可以单独用一个数组存储每个子项的折叠状态：

const MyList = ({childObjects}) => {
    // 初始化与子项数量匹配的折叠状态数组
    const [collapsedStates, setCollapsedStates] = useState(
        Array(childObjects.length).fill(false)
    )

    const handleCollapseAll = () => {
        setCollapsedStates(Array(childObjects.length).fill(true))
    }

    const handleToggleSingle = (index) => {
        setCollapsedStates(prev => {
            const newStates = [...prev]
            newStates[index] = !newStates[index]
            return newStates
        })
    }

    return (
        <div>
            <button onClick={handleCollapseAll}>全部折叠</button>
            {childObjects.map((obj, idx) => (
                <ListChild
                    obj={obj}
                    key={idx}
                    collapsed={collapsedStates[idx]}
                    onToggle={() => handleToggleSingle(idx)}
                />
            ))}
        </div>
    )
}

export default MyList

适合需要保留原始数据纯净性的场景，同样能实现需求。

关于使用ref的说明 #

如果非要用ref操作子组件，虽然技术上可行，但不推荐——这种方式会破坏组件封装性，容易导致状态不一致，维护成本高。如果确实要实现，需要子组件通过forwardRef暴露修改状态的方法：

// 子组件ListChild需要用forwardRef暴露方法
const ListChild = forwardRef(({obj, collapsed}, ref) => {
    const [localCollapsed, setLocalCollapsed] = useState(collapsed)

    // 暴露给父组件的方法
    useImperativeHandle(ref, () => ({
        setCollapsed: (val) => setLocalCollapsed(val)
    }))

    return (
        <div>
            {/* 子组件内容 */}
        </div>
    )
})

// 父组件中使用ref
const MyList = ({childObjects}) => {
    const childRefs = useRef([])

    const handleCollapseAll = () => {
        childRefs.current.forEach(ref => {
            ref?.setCollapsed(true)
        })
    }

    return (
        <div>
            <button onClick={handleCollapseAll}>全部折叠</button>
            {childObjects.map((obj, idx) => (
                <ListChild
                    obj={obj}
                    key={idx}
                    collapsed={false}
                    ref={el => childRefs.current[idx] = el}
                />
            ))}
        </div>
    )
}

除非有特殊场景限制，否则优先选择前面两种状态驱动的方案。

内容的提问来源于stack exchange，提问作者Victor2748