J'ai un sidenav qui garde une trace de ce qui est ouvert via un état openPath. Au clic d'un autre panneau, il réduit le précédent et ouvre le nouveau panneau cliqué. Dans le corps de ma page d'index, je veux avoir des boutons qui, en un clic, mettent à jour le chemin vers le chemin de ces panneaux particuliers sur le sidenav. Donc, définir l'état dans mon sidenav fonctionne parfaitement. Je veux également pouvoir également mettre à jour cet openPath à partir de la page d'index en cliquant sur un bouton.

Donc mon sidenav est comme ça

   class Sidebar extends React.Component {
      constructor(props){
        super(props);
      const openPath = window.history.state.openPath
      this.state = {
        openPath: openPath || null
      };

      }

    handleOpen = path => {
        this.setState({openPath: path});

      };

Mon sidenav est dans mon composant de disposition, donc c'est comme

LayOut (props) {
<SideNav/>
<Other Components/>
}

Et ma page d'index appelle le composant de disposition et la disposition enveloppe les boutons. Je veux mettre à jour la barre latérale openPath en cliquant sur l'un de ces boutons à partir du composant de la page d'index.

Class Index {
<LayOut>
<Button1/>
<Button2/>
</Layout>
}
0
AnneJoday 20 nov. 2018 à 20:24

3 réponses

Meilleure réponse

Ce que vous pouvez faire c'est

  1. Créez un contexte React.
  2. Exposez une méthode pour mettre à jour openPath à partir du fournisseur de contexte (dans la barre latérale), par exemple (updateOpenPath).
  3. Consommer le contexte en associant updateOpenPath aux clics sur les boutons
0
dance2die 20 nov. 2018 à 18:11

Il semble que vous devez transmettre des données aux composants enfants en tant que props.

Dans votre cas, cela peut vous obliger à hisser l'état au composant parent du composant SideNav. Une fois que vous faites cela, les frères et sœurs peuvent partager les mêmes valeurs que les accessoires. Il s'agit d'un paradigme courant dans le développement de React et il est décrit dans la documentation officielle.

0
Riley Steele Parsons 20 nov. 2018 à 17:32

Gardez votre état dans le composant d'index et transmettez le gestionnaire de mise à jour comme accessoire. Là à chaque fois, quand un bouton est cliqué dans la barre latérale, même les rendus de mise en page

0
klvenky 20 nov. 2018 à 17:30