web-dev-qa-db-fra.com

Reactjs - passage de la valeur d'état d'un composant à un autre

J'ai deux composants SideNav et Dashboard (deux sont dans des fichiers js différents). SideNav aura selectbox comme filtres. Je dois passer un tableau du composant Dashboard au composant Sidebar. Ce tableau doit être donné en tant que valeurs pour la zone de sélection (qui est dans le composant sidenav).

P.S. Quel sera le cas si deux classes de composants différentes sont définies dans deux fichiers JS différents. par exemple. HomeComponent/Home.js -> Composant parent Dashboard/Dashboard.js -> Composant enfant Je fais un appel API sur le fichier "Home.js" et récupère des données. Je souhaite transmettre ces données au fichier "Dashboard.js" (composant) Tous les exemples que j'ai étudiés montrent deux composants dans le même fichier JS. 

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state  = {viz:{},filterData:{}};
  }
  var data1= ['1','2','3'];
  this.setState({data1: data1}, function () {
     console.log(this.state.data1);
  });

 }

//Sidebar

class Sidebar extends Component {

   constructor(props) {
     super(props);
     this.state  = {
       data: ['opt1','opt2']
     };
   }

  handleClick(e) {
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
    this.setState({data: this.state.data1}, function () {
      console.log(this.state.data);
    });
  }

  render() {

    const props = this.props;
    const handleClick = this.handleClick;

    return (
      <div className="sidebar">
        <nav className="sidebar-nav">
          <Nav>
            <li className="nav-item nav-dropdown">
              <p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p>
              <ul className="nav-dropdown-items">
              <li> Organization <br/>
               <select className="form-control">
                <option value="">Select </option>
                {this.state.data.map(function (option,key) {
                   return <option key={key}>{option}</option>;
                 })}
               </select>
reactjscomponents
5
sudhashree

Si vous devez passer des états de Dashboard à Sidebar, vous devez rendre la fonction Sidebar à partir de la fonction de rendu de Dashboard. Ici, vous pouvez passer l'état du tableau de bord à la barre latérale.

Extrait de code

class Dashboard extends Component {
...
...
  render(){
    return(
    <Sidebar data={this.state.data1}/>
    );
  }
}

Si vous souhaitez que les modifications apportées aux accessoires (données1) transmises à Sidebar soient reçues par Dashboard, vous devez lever cet état. En d'autres termes, vous devez transmettre une référence de fonction de Dashboard à Sidebar. Dans la barre latérale, vous devez l'invoquer chaque fois que vous souhaitez que les données1 soient renvoyées à Dashboard. Extrait de code.

class Dashboard extends Component {
  constructor(props){
    ...
    //following is not required if u are using => functions in ES6.
    this.onData1Changed = this.onData1Changed.bind(this);
  }
  ...
  ...
  onData1Changed(newData1){
    this.setState({data1 : newData1}, ()=>{
      console.log('Data 1 changed by Sidebar');
    })
  }

  render(){
    return(
    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/>
    );
  }
}

class Sidebar extends Component {
  ...
  //whenever data1 change needs to be sent to Dashboard
  //note: data1 is a variable available with the changed data
  this.props.onData1changed(data1);
}

Doc de référence: https://facebook.github.io/react/docs/lifting-state-up.html

6
Sri

Vous ne pouvez transmettre que les accessoires du composant parent au composant enfant. Soit vous restructurez la hiérarchie de vos composants pour créer cette dépendance, soit vous utilisez un système de gestion des états/événements tel que Redux (react-redux).

0
JulienD

Je pense que le fait de garder les valeurs de statut alignées sur l'URL de la page est un autre bon moyen, non seulement de transmettre des valeurs, mais également de garder le statut de la page contrôlable à l'aide d'URL.

Imaginez que vous construisez une page de recherche avancée, dans laquelle différents composants contrôlent les critères de recherche. Par conséquent, en plus de la fonctionnalité de recherche, l'utilisateur doit pouvoir conserver ses paramètres de recherche en fonction de l'URL utilisée.

Supposons que cliquer sur un lien dans le composant x ajoute une chaîne de requête critère1 = x à l'URL de la page en cours, et ainsi de suite pour les autres composants. Supposons que nous ayons également configuré la fonctionnalité de recherche pour que l'URL en lise les valeurs d'état. Vous pourrez ainsi transmettre les valeurs d'un composant spécifique à un nombre quelconque de composants sans restrictions.

0
Yazid Erman