Wie man in React.js Requisiten von einer Klasse zur anderen weiterleitet

Requisiten in React werden vom Elternteil an das Kind übergeben. Wenn Sie beispielsweise eine übergeordnete Klasse haben, die eine untergeordnete Klasse darstellt, kann die übergeordnete Klasse jetzt Requisiten an die untergeordnete Klasse übergeben. Hier ist ein Beispiel. 

class Parent extends React.Component {
    render() {
        return (
            <Child example="foo" />
        )
    }
}

class Child extends React.component {
    render() {
        return (
            <h1>{this.props.example}</h1>
        )
    }
}

Die übergeordnete Klasse gibt die untergeordnete Klasse wieder. Die übergeordnete Klasse übergibt eine Requisite, die als Beispiel bezeichnet wird. In child können Sie auf den Wert von child zugreifen, indem Sie this.props.example aufrufen.

Anstatt zehnmal auf das DOM zu rendern, sollten Sie eine Hauptkomponente rendern, die die anderen Komponenten umschließt. Sie können Komponenten in anderen Komponenten wiederverwenden und Requisiten weitergeben.

Sie müssen eine andere Komponente verwenden, die diese beiden enthält und die ausgewählte Farbe als Status verwaltet. Wenn ColorPicker einen neuen Wert erhält, wird der Status des Containers aktualisiert, und Box erhält diesen Farbwert aus dem Containerzustand.

ColorPicker sollte den Rückruf von Requisiten erhalten, der ausgeführt wird, wenn sich der Farbwert ändert.

var ColorPicker = React.createClass({

render: function() {

return (
    <div>
        <select id="pick-colors" onChange={this.props.onChange}>
            <option value="red">
                Red 
            </option>

            <option value="green">
                Green 
            </option>

            <option value="blue">
                Blue 
            </option>

        </select>

    </div>
    )
}
});

var App = React.createClass({
    getInitialState: function() {
        return {
             selectedColor: '#FFFFFF'
        }    
    },
    onColorPicked: function(e) {
        this.setState({selectedColor: e.target.value })
    },
    render: function() {
        return (
            <div>
              <ColorPicker onChange={this.props.onColorPicked} />
              <Box color={this.state.selectedColor} />
            </div>
        )
    }

}

Die einzige stateful-Komponente sollte App sein. Es gibt seinen Zustand durch Stützen an die anderen Komponenten weiter.

Sie könnten so etwas tun

var ColorPicker = React.createClass({
 getInitialState: function() {
  return {color: 'white'}
 },
 handleChange: function(e) {
  var newColor = e.target.value;
  this.setState({color: newColor})
 },

 render: function() {

  return (
   <div>
     <select id="pick-colors" onChange={this.handleChange}>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
     </select>
    <Box color={this.state.color} />
    <Box color={this.state.color} />
    <Box color={this.state.color} />
  </div>
 )
}
});

//contains the boxes that will eventually change color
var Box = React.createClass({
 render: function() {
  return (
   <div >
    <div className='box' style={{background:this.props.color}}> 
    </div>
   </div>
  );
 }
});

ReactDOM.render(<ColorPicker />, document.getElementById('pick_color'));

Anstatt die Box mehrmals zu rendern, verwenden Sie den obigen Vorschlag von @gesuwall. Ich denke, sein Weg ist der effektivere Weg.

In diesem Fall müssen Sie den Status in eine übergeordnete Komponente aufheben, die sowohl die ColorPicker- als auch die Box-Klasse umschließt. Die neue übergeordnete Komponente ist dann für die Verwaltung des aktuellen Farbzustands und die Bearbeitung aller Änderungen verantwortlich. Die reactJS-Dokumente zum Anheben des Zustands sind für Sie hilfreich.

1. Sie müssen React.render einmal pro Anwendung aufrufen, da bei jedem Aufruf das neue virtuelle DOM für eine neue App erstellt wird
2. Sie müssen die Konzeption des virtuellen DOM verstehen und Ihre Markierung in der Anwendungscontainerkomponente der obersten Ebene in seiner Render-Methode implementieren
3. In einem reinen Fall, wie in diesem Beispiel, müssen Sie alle Daten über den Status der App-Komponente verbinden. Dies bedeutet, dass die ColorPicker-Komponente beim Ändern der Farbe diese im App-Status speichert. Von dort aus aktualisiert sie die Komponenten einer Box-Komponente nach einem geänderten Wert, wenn Sie jedoch eine komplexere Anwendung entwickeln Sie müssen die Datenspeicherung mithilfe von Redux- oder Flux-Konzeption organisieren. Dies ist auch der richtige Weg für den Datenaustausch zwischen mehreren Anwendungen auf derselben Seite

Also, hier richtiger Code, der Ihr Beispiel implementiert 

Wenn Sie Eigenschaften von einem übergeordneten Element an das untergeordnete Element übergeben, müssen Sie die componentDidUpdate () -Methode zum Sammeln und Verwenden der Eigenschaften verwenden. Andernfalls werden die Eigenschaften möglicherweise noch nicht initialisiert und führen zu Nullwerten in der untergeordneten Komponente. Ich habe den Code von oben geändert, um die componentDidUpdate () -Methode einzuschließen.

class Parent extends React.Component {
    render() {
        return (
            <Child bandName="foo fighters" />
        )
    }
}

class Child extends React.Component {

    //For props, you use componentDidUpdate
    componentDidUpdate(prevProps){

      //You must have an if check, or loop forever
      if(this.props.bandName !== this.prevProps.bandName){}
         //do something like make an API call
         //perhaps set this on state for display
      }
    }

    render() {
        return (
            <h1>{this.props.bandName}</h1>
        )
    }
}