如何配置按钮实现React所有手风琴组件的统一展开/折叠？

你的需求完全可行，之前用ref的方案问题在于：拿到的是按钮DOM而非组件状态的修改入口，且单个ref无法管理动态生成的多个组件，同时直接修改state违反React的状态更新规则。下面用Context实现全局控制，完美适配嵌套、动态渲染的场景：

1. 创建全局控制Context #

这个Context用来传递组件注册/注销方法，以及全展开/全折叠的控制函数：

import React, { createContext, useContext, useState, useCallback } from 'react';

const CollapsibleContext = createContext();

export const CollapsibleProvider = ({ children }) => {
  // 存储所有手风琴组件的状态更新函数
  const [openSetters, setOpenSetters] = useState([]);

  // 注册组件的状态更新函数
  const registerSetter = useCallback((setter) => {
    setOpenSetters(prev => [...prev, setter]);
  }, []);

  // 注销组件的状态更新函数（防止内存泄漏）
  const unregisterSetter = useCallback((setter) => {
    setOpenSetters(prev => prev.filter(s => s !== setter));
  }, []);

  // 触发所有组件展开
  const expandAll = useCallback(() => {
    openSetters.forEach(setter => setter(true));
  }, [openSetters]);

  // 触发所有组件折叠
  const collapseAll = useCallback(() => {
    openSetters.forEach(setter => setter(false));
  }, [openSetters]);

  return (
    <CollapsibleContext.Provider value={{ registerSetter, unregisterSetter, expandAll, collapseAll }}>
      {children}
    </CollapsibleContext.Provider>
  );
};

2. 修改Collapsible组件 #

让组件在挂载时注册自己的状态更新函数，卸载时注销，同时保留自身的toggle功能：

import React, { useState, useEffect, useContext } from 'react';
import { CollapsibleContext } from './CollapsibleContext';

const Collapsible = (props) =>{
    const [open, setOpen] = useState(false);
    const { registerSetter, unregisterSetter } = useContext(CollapsibleContext);

    useEffect(() => {
      // 组件挂载时注册状态更新函数
      registerSetter(setOpen);
      // 组件卸载时注销，避免内存泄漏
      return () => unregisterSetter(setOpen);
    }, [registerSetter, unregisterSetter, setOpen]);

    const toggle = () => {
        setOpen(!open);
    }

    return(
        <div>
            <button className={props.level} onClick={toggle}>{props.label}</button>
            {open && (
                <div className="toggle">
                    {props.children}
                </div>
            )}
        </div>
    )
}

export default Collapsible;

3. 主应用中使用 #

用Provider包裹整个应用，然后直接调用全局控制函数即可：

import React, { useContext } from 'react';
import { CollapsibleProvider } from './CollapsibleContext';
import Collapsible from './Collapsible';
import NestedComponent from './NestedComponent'; // 内部包含Collapsible的子组件

function App() {
  const { expandAll, collapseAll } = useContext(CollapsibleContext);

  return (
    <CollapsibleProvider>
      <div className="app">
        <button onClick={expandAll}>展开全部</button>
        <button onClick={collapseAll}>折叠全部</button>

        {/* 直接渲染的手风琴 */}
        <Collapsible label="基础手风琴" level="content">
          基础手风琴内容
        </Collapsible>

        {/* 嵌套组件中的手风琴也会被统一控制 */}
        <NestedComponent />
      </div>
    </CollapsibleProvider>
  );
}

export default App;

方案优势 #

• 跨层级控制：不管Collapsible嵌套在多少层子组件里，只要在Provider范围内就能被控制
• 动态适配：自动跟踪组件的挂载和卸载，无需提前知道组件数量
• 不破坏原有功能：组件自身的toggle功能依然保留，全局控制和单个控制互不冲突

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