<p>Ich habe eine Komponente, die mithilfe des folgenden Codes ein zusammenklappbares Akkordeon erstellt: </p> <pre class="brush:php;toolbar:false;">import React, {useState} from 'react'; const Collapsible = (props) =>{ const [open, setOpen] = useState(false); const toggle = () => setOpen(!open); } zurückkehren( <div> <button className={props.level} onClick={toggle}>{props.label}</button> {öffnen && ( <div className="toggle"> {props.children} </div> )} </div> ) } Standard exportieren Collapsible;</pre> <p>Ich verwende es an mehreren Stellen in der Hauptanwendung und manchmal auch in anderen Akkordeons. In mehreren Fällen hatte ich tatsächlich keine Ahnung, wie viele Akkordeons es auf der Seite geben würde, da sie dynamisch basierend auf den Daten gerendert wurden. Vor diesem Hintergrund möchte ich in der Hauptanwendung eine Schaltfläche erstellen, die alle Akkordeons ein- und ausschaltet, ohne eine feste Anzahl festlegen zu müssen und ohne alle Akkordeons in der Hauptanwendung (d. h. einige Akkordeons in anderen Komponenten) rendern zu müssen und dann in die Hauptanwendung importiert). </p> <p>Ich habe versucht, Ref-Hooks zu verwenden, um dies zu erreichen: </p> <ol> <li>Referenz in der Schaltfläche der zusammenklappbaren Komponente hinzufügen und von der übergeordneten Komponente über Requisiten darauf zugreifen: </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>Fügen Sie den folgenden Verweis in der Hauptanwendung hinzu: </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>Verwenden Sie die folgenden Schaltflächen in der Hauptanwendung: </li> </ol> <pre class="brush:php;toolbar:false;"><button onClick = {openClick}> Alle erweitern </button> <button onClick = {closeClick}> Alles einklappen </button></pre> <ol start="4"> <li>Ref beim Rendern zum Akkordeon hinzufügen: </li> </ol> <pre class="brush:php;toolbar:false;"><Collapsible label="" level="content" innerRef={childRef}></pre> <p>Das bringt eigentlich nichts, wahrscheinlich weil die Art und Weise, wie ich in Schritt 2 versucht habe, auf den Status zuzugreifen, falsch war, aber ich dachte, es wäre einen Versuch wert ...</p> <p>Irgendwelche Ideen, ob dies möglich ist? </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 };
};