Comment passer des accessoires à partir d'une classe à l'autre dans React.js

Je suis très nouveau à Réagir. Je pratique par la création d'une très simple neuf de la boîte de grille, où un utilisateur peut choisir de quelle couleur qu'ils souhaitent utiliser à l'aide d'un menu déroulant. Le seul truc, c'est que je n'arrive pas à comprendre comment passer la variable de la classe qui la contient (ColorPicker) à la classe qui contient les grilles (Encadré). Quelqu'un peut-il me donner quelques conseils sur la façon de faire cela?

Je suis encore à m'habituer à passer les accessoires pour d'autres classes.

Voici un lien vers le CodePen: http://codepen.io/anfperez/pen/RorKge

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

OriginalL'auteur Leia_Organa | 2016-11-17

20

Accessoires de Réagir, de se passer de la mère à l'enfant. Par exemple, Si vous avez un parent de la classe qui rend un enfant de la classe, la classe parent peut désormais transmettre les accessoires de la classe enfant. Ici est un exemple.
```
class Parent extends React.Component {
    render() {
        return (
            <Child example="foo" />
        )
    }
}

class Child extends React.component {
    render() {
        return (
            <h1>{this.props.example}</h1>
        )
    }
}
```
La classe parent rend l'enfant de la classe. La classe parent transmet un accessoire pour enfant appelé exemple. En enfant, vous pouvez avoir accès à la valeur de l'enfant en appelant this.props.example

OriginalL'auteur Chaim Friedman
2

Au lieu de rendre les DOM 10 fois, vous devez effectuer le rendu d'une composante principale qui enveloppe chacun des autres. Vous pouvez réutiliser des composants à l'intérieur d'autres composants et passer des accessoires de down.

OriginalL'auteur Rico Rojas

Vous devez utiliser un autre composant qui contient ces deux et gère la couleur sélectionnée comme son état. lorsque le ColorPicker obtient une nouvelle valeur, le conteneur de l'état des mises à jour, et Box obtient ce que c'est la couleur de la valeur à partir de contenants de l'état.

ColorPicker devriez l'obtenir à partir d'accessoires de la callback à exécuter lorsque la valeur de la couleur des changements.

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

}

Le seul composant avec état doit être App. Il passe son état par le biais des accessoires pour les autres composants.

OriginalL'auteur gesuwall

1

C'est un cas où vous avez besoin de lever l'état dans un composant parent qui englobe à la fois le composant ColorPicker et la Boîte de classes. Le nouveau composant parent sera ensuite responsable de la gestion de la couleur actuelle de l'état, et de traiter avec des modifications. Le reactJS docs sur la levée de l'état sera utile pour vous.

OriginalL'auteur Alex Young
1
1. Vous devez appeler à Réagir.rendre une fois par application, parce que chaque appel signifie que le nouveau virtual DOM créé pour une nouvelle Application
2. Vous devez comprendre virtuel DOM conception et l'implémentation de votre balisage en Application de haut niveau composant conteneur dans sa méthode de rendu
3. Dans un cas pur, comme dans cet exemple, vous devez vous connecter à toutes les données à travers l'Application de la composante de l'état, des moyens composant ColorPicker sur le changement de couleur de la stocker dans l'état d'Application, à partir de laquelle il met à jour un composant Boîte d'accessoires par l'évolution de la valeur, mais si Vous développez une application plus complexe, vous devez organiser le stockage des données à l'aide de redux ou de flux de conception, qui sera également droit chemin pour l'échange de données entre plusieurs applications sur une même page
Donc, ici bon code, de mettre en œuvre votre échantillon

OriginalL'auteur js-coder

Vous pourriez faire quelque chose comme ce

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

Au lieu de rendre la box plusieurs fois ou utiliser @gesuwall la suggestion ci-dessus. Je pense que sa voie est la façon la plus efficace.

OriginalL'auteur Komolafe Tolulope

Vous devez vous connecter pour publier un commentaire.