Reactjs - Übergabe Zustandswert von einer Komponente zur anderen

Question

Ich habe zwei Komponenten SideNav und Dashboard (zwei sind in verschiedenen js-Dateien). SideNav wird selectbox als Filter haben. Ich muss ein Array von Dashboard-Komponente zu Sidebar-Komponente übergeben. Dieses Array muss als Wert für das Auswahlfeld angegeben werden (das innerhalb der SideNav-Komponente liegt).

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> 

Answer 1

Wenn Sie den Status von Dashboard an Sidebar übergeben müssen, müssen Sie Sidebar aus der Renderfunktion des Dashboards rendern. Hier können Sie den Status von Dashboard an die Sidebar übergeben.

Code-Snippet

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

Wenn Sie die Änderungen auf die Stützen (data1) übergeben Sidebar mit dem Dashboard empfangen möchten, müssen Sie den Zustand nach oben heben. Sie müssen eine Funktionsreferenz vom Dashboard an die Sidebar übergeben. In der Sidebar müssen Sie sie aufrufen, wenn Sie möchten, dass die Daten1 an Dashboard zurückgegeben werden. Code-Schnipsel.

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); 
} 

Referenz Doc: https://facebook.github.io/react/docs/lifting-state-up.html

Answer 2

können Sie nur Requisiten von Eltern auf das Kind Komponente zu übergeben. Umstrukturieren Sie entweder Ihre Komponentenhierarchie, um diese Abhängigkeit zu haben, oder verwenden Sie ein Zustands/Ereignisverwaltungssystem wie Redux (react-redux).