wake-up-neo.net

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

Ich bin sehr neu zu reagieren. Ich übe, indem ich ein sehr einfaches Neunraster-Feld erstelle, in dem ein Benutzer mithilfe eines Dropdown-Menüs auswählen kann, welche Farbe er momentan verwenden möchte. Die einzige Sache ist, ich kann nicht ganz herausfinden, wie ich die Variable von der Klasse, die sie enthält (ColorPicker), an die Klasse übergibt, die die Raster (Box) enthält. Kann mir jemand ein paar Hinweise geben, wie das geht?

Ich gewöhne mich immer noch daran, Requisiten an andere Klassen weiterzugeben.

Hier ist ein Link zum CodePen: http://codepen.io/anfperez/pen/RorKge

Hier ist mein Code

//this displays the color selections for the boxes: red, green, and blue
var ColorPicker = React.createClass({

handleChange: function(e) {
    var newColor = e.target.value;
    this.props.onChange(color);

},

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>

    </div>
    )
}
});

//contains the boxes that will eventually change color
var Box = React.createClass({
getInitialState: function() {
    return {
      //boxes are initially white
        color: 'white'
    };
},

    changeColor: function(newColor) {
        var newColor = this.state.color;
        this.setState({
            color: newColor
        });

    },

render: function() {
    return (
    <div >
    <div className='box' style={{background:this.state.color}} onClick={this.changeColor}> 
    </div>
    </div>
    );
}
});
8
Leia_Organa

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.

20
Chaim Friedman

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.

2
Rico Rojas

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.

2
gesuwall

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.

1

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
Alex Young
  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 

1
js-coder

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>
        )
    }
}
0
user3018736