J'ai un composant qui crée un accordéon pliable en utilisant le code suivant :
importer React, {useState} depuis 'react'; const Collapsible = (accessoires) =>{ const [open, setOpen] = useState(false); const bascule = () => setOpen(!ouvert); } retour( {ouvrir && {accessoires.enfants} )} ) } exporter par défaut Pliable ; Je l'utilise à plusieurs endroits dans l'application principale et parfois dans d'autres accordéons. Dans plusieurs cas, je n'avais en fait aucune idée du nombre d'accordéons qu'il y aurait sur la page, car ils étaient rendus dynamiquement en fonction des données. Dans cet esprit, je souhaite créer un bouton dans l'application principale qui active (et désactive) tous les accordéons sans avoir à définir un nombre fixe et sans avoir à restituer tous les accordéons dans l'application principale (c'est-à-dire certains accordéons dans d'autres composants). puis importé dans l'application principale).
J'ai essayé d'utiliser des crochets de référence pour y parvenir :
;
- Ajoutez la référence suivante dans l'application principale :
const childRef = useRef(); const openClick = () => childRef.state = vrai ; } const closeClick = () => childRef.state = faux ; }
- Utilisez les boutons suivants dans l'application principale :
Développer tout Tout réduire
- Ajouter une référence à l'accordéon lors du rendu :
En réalité, cela ne fait rien, probablement parce que la façon dont j'essayais d'accéder à l'état à l'étape 2 était erronée, mais j'ai pensé que cela valait la peine d'essayer...
Des idées pour savoir si cela est possible ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser
Redux.openAllAccordions, parcourez les identifiants et définissez l'accordéon appartenant à cet identifiant sur open=truecloseAllAccordions, parcourez les identifiants et définissez l'accordéon appartenant à cet identifiant sur open=falseDans une collection plus ou moins arbitraire d'instances de composants, il est courant d'avoir besoin d'une certaine coordination. Une approche que j'ai utilisée avec succès consiste à créer unContextavec un hook associé avec lequel les composants peuvent être enregistrés. Ce hook renvoie une vue de l'état partagé et une fonction qui modifie cet état en fonction de vos besoins.
Ici, vous pouvez créer un contexte qui stocke les
opener函数并提供openAll/closeAllfonctions pour chaque composant enregistré :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 (...Il existe également un hook appelé par chaque composant enfant pour s'enregistrer dans le contexte et renvoyer la valeur
toggle/openfamilière :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 }; };Il existe également un hook séparé pour effectuer des opérations par lots, ce qui est également pratique :
const useAccordionAsManager = () => { const { openAll, closeAll } = useContext(AccordionContext); return { openAll, closeAll }; };Bac à sable
Veuillez noter que par souci de simplicité, une fonction
opener（又名setOpen) distincte est utilisée ici comme identifiant unique pour chaque composant enregistré. Une alternative flexible consiste à utiliser d'autres identifiants afin de pouvoir ouvrir/fermer des accordéons arbitraires dans la navigation, etc.