<p>我有一个组件，使用以下代码创建一个可折叠的手风琴：</p> <pre class="brush:php;toolbar:false;">import React, {useState} from 'react'; const Collapsible = (props) =&gt;{ const [open, setOpen] = useState(false); const toggle = () =&gt; { setOpen(!open); } return( &lt;div&gt; &lt;button className={props.level} onClick={toggle}&gt;{props.label}&lt;/button&gt; {open &amp;&amp; ( &lt;div className=&quot;toggle&quot;&gt; {props.children} &lt;/div&gt; )} &lt;/div&gt; ) } export default Collapsible;</pre> <p>我在主应用程序的多个位置使用它，有时在其他手风琴中使用手风琴。在多个实例中，我实际上不知道页面上会有多少手风琴，因为它们是基于数据动态渲染的。考虑到这一点，我想在主应用程序中创建一个按钮，打开（和关闭）所有手风琴，而不需要设置一个固定的数量，并且不需要在主应用程序中渲染所有手风琴（即一些手风琴在其他组件中渲染，然后导入到主应用程序中）。</p> <p>我尝试使用ref hooks来实现这一点：</p> <ol> <li>在Collapsible组件的按钮中添加ref，并通过props从父组件访问：</li> </ol> <pre class="brush:php;toolbar:false;">&lt;button className={props.level} onClick={toggle} ref={props.innerRef}&gt;{props.label}&lt;/button&gt;</pre> <ol start="2"> <li>在主应用程序中添加以下ref：</li> </ol> <pre class="brush:php;toolbar:false;">const childRef = useRef(); const openClick = () =&gt; { childRef.state = true; } const closeClick = () =&gt; { childRef.state = false; }</pre> <ol start="3"> <li>在主应用程序中使用以下按钮：</li> </ol> <pre class="brush:php;toolbar:false;">&lt;button onClick = {openClick}&gt; 展开全部 &lt;/button&gt; &lt;button onClick = {closeClick}&gt; 折叠全部 &lt;/button&gt;</pre> <ol start="4"> <li>在渲染时将ref添加到手风琴中：</li> </ol> <pre class="brush:php;toolbar:false;">&lt;Collapsible label=&quot;&quot; level=&quot;content&quot; innerRef={childRef}&gt;</pre> <p>这实际上什么都没做，可能是因为我在第2步中尝试访问状态的方式是错误的，但我认为这是值得一试的...</p> <p>对于是否可行的任何想法吗？</p>

const AccordionProvider = ({ children }) => {
  const [openers] = useState(new Set());

  // 当创建时，是否应该展开新的可折叠项？
  //（支持递归展开是必要的）
  const [defaultOpen, setDefaultOpen] = useState(false);

  const register = useCallback(
    (opener) => {
      openers.add(opener);
      return () => openers.delete(opener); // 返回一个用于`useEffect`的取消注册函数
    },
    [openers]
  );

  const openAll  = useCallback(() => {
    setDefaultOpen(true);
    openers.forEach(opener => opener(true)),
  }, [setDefaultOpen, openers]);

  const closeAll = useCallback(() => {
    setDefaultOpen(false);
    openers.forEach(opener => opener(false)),
  }, [setDefaultOpen, openers]);

  return (
    <AccordionContext.Provider
      value={{ register, openAll, closeAll, defaultOpen }}
      children={children}
    />
  );
};

const useAccordionAsClient = () => {
  const { register, defaultOpen } = useContext(AccordionContext);

  const [open, opener] = useState(defaultOpen);
  const toggle = useCallback(() => opener((open) => !open), [opener]);

  useEffect(() => register(opener), [register, opener]);

  return { toggle, open };
};

const useAccordionAsManager = () => {
  const { openAll, closeAll } = useContext(AccordionContext);

  return { openAll, closeAll };
};