<p>我有一個組件，使用以下程式碼創建一個可折疊的手風琴：</p> <pre class="brush:php;toolbar:false;">import React, {useState} from 'react'; const Collapsible = (props) =>{ const [open, setOpen] = useState(false); 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;</pre> <p>我在主應用程式的多個位置使用它，有時在其他手風琴中使用手風琴。在多個實例中，我實際上不知道頁面上會有多少手風琴，因為它們是基於資料動態渲染的。考慮到這一點，我想在主應用程式中創建一個按鈕，打開（和關閉）所有手風琴，而不需要設置一個固定的數量，並且不需要在主應用程式中渲染所有手風琴（即一些手風琴在其他元件中渲染，然後匯入主應用程式）。 </p> <p>我嘗試使用ref hooks來實現這一點：</p> <ol> <li>在Collapsible組件的按鈕中加入ref，並透過props從父組件存取：</li> </ol> <pre class="brush:php;toolbar:false;"><button className={props.level} onClick={toggle} ref={props.innerRef}>{props.label}</button> ;</pre> <ol start="2"> <li>在主應用程式中加入以下ref：</li> </ol> <pre class="brush:php;toolbar:false;">const childRef = useRef(); const openClick = () => { childRef.state = true; } const closeClick = () => { childRef.state = false; }</pre> <ol start="3"> <li>在主應用程式中使用以下按鈕：</li> </ol> <pre class="brush:php;toolbar:false;"><button onClick = {openClick}> 展開全部 </button> <button onClick = {closeClick}> 折疊全部 </button></pre> <ol start="4"> <li>在渲染時將ref加入手風琴：</li> </ol> <pre class="brush:php;toolbar:false;"><Collapsible label="" level="content" innerRef={childRef}></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 (
    
  );
};

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 };
};