web-dev-qa-db-de.com

Reactjs - Statuswert von einer Komponente an eine andere übergeben

Ich habe zwei Komponenten SideNav und Dashboard (zwei befinden sich in verschiedenen js-Dateien). SideNav hat eine Auswahlbox als Filter. Ich muss ein Array von der Dashboard-Komponente an die Sidebar-Komponente übergeben. Dieses Array muss als Werte für das Auswahlfeld (das sich innerhalb der Sidenav-Komponente befindet) angegeben werden.

P.S. Was ist der Fall, wenn ich zwei unterschiedliche Komponentenklassen in zwei verschiedenen JS-Dateien definiert habe. z.B. HomeComponent/Home.js -> Übergeordnete Komponente Dashboard/Dashboard.js -> Untergeordnete Komponente Ich mache einen API-Aufruf für die Datei "Home.js" und erhalte Daten. Ich möchte diese Daten an die Datei "Dashboard.js" (Komponente) .__ übergeben. Alle von mir untersuchten Beispiele zeigen zwei Komponenten in derselben JS-Datei. 

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>
5
sudhashree

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

Code-Auszug

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

Wenn Sie möchten, dass die an der Sidebar übergebenen Requisiten (data1) von Dashboard vorgenommen werden, müssen Sie den Status aufheben. Das heißt, Sie müssen eine Funktionsreferenz von Dashboard an die Sidebar übergeben. In der Seitenleiste müssen Sie es immer dann aufrufen, wenn Sie möchten, dass data1 wieder an Dashboard übergeben wird. Code-Auszug.

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

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

6
Sri

Ich hatte das gleiche Problem mit übergeordneten und untergeordneten Komponenten und die Lösung bestand darin, die Funktion (die den Status in der übergeordneten Komponente ändert) einfach als Requisite an die untergeordnete Komponente zu senden. Auf diese Weise teilen beide den Status dieser bestimmten Variablen. Hoffe, dieser unkomplizierte Ansatz hilft Ihnen!

1
simpleCoder

Sie können Requisiten nur von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Strukturieren Sie Ihre Komponentenhierarchie entweder neu, oder verwenden Sie ein Status-/Ereignisverwaltungssystem wie Redux (React-Redux).

0
JulienD

Ich glaube, dass das Anpassen der Statuswerte an der Seiten-URL ein weiterer guter Weg ist, nicht nur Werte zu übergeben, sondern auch den Seitenstatus mit URLs kontrollierbar zu halten.

Stellen Sie sich vor, Sie erstellen eine erweiterte Suchseite, auf der die Suchkriterien von verschiedenen Komponenten gesteuert werden. Daher sollte der Benutzer neben der Suchfunktion auch in der Lage sein, seine Sucheinstellungen anhand der verwendeten URL zu speichern.

Angenommen, ein Klick auf einen Link in Komponente x fügt der aktuellen Seiten-URL eine Abfragezeichenfolge krit1 = x hinzu usw. für die anderen Komponenten. Angenommen, wir haben die Suchfunktion auch so konfiguriert, dass sie von der URL abhängt, um Statuswerte daraus zu lesen. Auf diese Weise können Sie Werte von einer bestimmten Komponente an eine beliebige Anzahl von Komponenten ohne Einschränkungen übergeben.

0
Yazid Erman