J'utilise réact-bootstrap mais ma question est plus générale.
Considérez le composant ci-dessous, ce qui rend un bouton qui bascule / effondre du texte basé sur l'état: p> Je fais quelque chose de similaire, mais pour un nombre arbitraire de Boutons et valeurs d'état. Mon composant reçoit un tableau, que je fais de la carte et de retourner des boutons. Assez facile, mais je dois ensuite créer un état unique pour chaque bouton afin que la bascule on ne déclenche pas les autres: p> J'ai essayé diverses idées, telles que transformer la Tableau sur un objet et réglage que pour indiquer: P> // arr === [2,6,9]
const newState = foo(arr) // {2: false, 6: false, 9: false}
const [open, setOpen] = useState(newState);
3 Réponses :
Si l'état est uniquement destiné à ouvrir / effondrer le texte. Vous n'avez pas besoin de passer le tableau dans l'exemple (). Gardons l'état à chaque bouton.
Après avoir créé l'exemple () ci-dessus, il suffit de rendre le tableau comme celui-ci Voici une boîte à sable de code afin que vous puissiez jouer avec elle :
https://codesandbox.io/s/elated-ives-j24y3
Je pense que vous êtes sur la bonne voie! Voici un exemple qui accomplit la tâche qui fait (à peu près) ce que vous envisagez de faire (un objet de valeurs correspondant à vos boutons).
import React, { useState } from "react";
import ReactDOM from "react-dom";
const btns = ["bt1", "bt2", "bt3"];
function App() {
const [active, setActive] = useState({});
return (
<div className="App">
{btns.map(btn => {
return (
<div key={btn}>
<button
onClick={() => setActive({ ...active, [btn]: !active[btn] })}
>
{btn}
</button>
{active[btn] ? "on" : "off"}
</div>
);
})}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Un moyen de résoudre ce problème serait de créer un composant qui garde une trace de son propre État au lieu d'avoir la piste de parent.
Voici un exemple de ce que ce composant pourrait ressembler (semble très similaire au < code> exemple composant que vous avez dans votre question). à l'aide du composant remarquer comment Nous ne gardons pas une trace d'un état dans le composant updateExampleExample (parent), mais laissez plutôt chaque bouton (codez> (enfant) composant gardez une trace de son propre état.
Pourquoi ne pouvez-vous pas
usestate (nouveau tableau (arr.length)) ? Utilisez un tableau avec l'index étant l'index de l'élément