web-dev-qa-db-fra.com

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

Je suis très nouveau pour réagir. Je m'exerce à créer une très simple zone de neuf grilles, dans laquelle un utilisateur peut sélectionner la couleur qu'il souhaite utiliser pour le moment à l'aide d'un menu déroulant. Le seul problème est que je ne vois pas comment passer de la classe qui la contient (ColorPicker) à la classe contenant les grilles (Box). Quelqu'un peut-il me donner des indications sur la façon de procéder?

Je m'habitue encore à passer des accessoires à d'autres classes.

Voici un lien vers 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>
    );
}
});
javascriptclassreactjscomponents
8
Leia_Organa

Les accessoires dans React sont transmis du parent à l'enfant. Par exemple, si vous avez une classe parent qui restitue une classe enfant, celle-ci peut maintenant transmettre des accessoires à la classe enfant. Voici 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 la classe enfant. La classe parent transmet un accessoire à l'enfant appelé exemple. Dans child, vous pouvez avoir accès à la valeur de child en appelant this.props.example

20
Chaim Friedman

Au lieu de rendre 10 fois le rendu dans le DOM, vous devez générer un composant principal qui englobe chacun des autres. Vous pouvez réutiliser des composants à l'intérieur d'autres composants et transmettre des accessoires.

2
Rico Rojas

Vous devez utiliser un autre composant contenant ces deux éléments et gérant la couleur sélectionnée en tant qu'état. Lorsque ColorPicker obtient une nouvelle valeur, l'état du conteneur est mis à jour et Box obtient cette valeur de couleur à partir de l'état des conteneurs.

ColorPicker devrait obtenir de props le rappel à exécuter lorsque la valeur de couleur change.

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 stateful doit être App. Il transmet son état à l'aide d'accessoires aux autres composants.

2
gesuwall

Tu pourrais faire quelque chose comme ça

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 restituer la boîte plusieurs fois, utilisez la suggestion de @ gesuwall ci-dessus. Je pense que sa manière est la plus efficace.

1
Komolafe Tolulope

Dans ce cas, vous devez placer l'état dans un composant parent qui englobe les classes ColorPicker et Box. Le nouveau composant parent sera alors responsable de la gestion de l’état actuel de la couleur et de son éventuelle modification. Les documents reactJS sur l'état de levage vous seront utiles.

1
Alex Young
  1. Vous devez appeler React.render une fois par application, car chaque appel signifie que le nouveau DOM virtuel créé pour une nouvelle application.
  2. Vous devez comprendre la conception du DOM virtuel et implémenter votre balisage dans le composant conteneur d'applications de niveau supérieur dans sa méthode de rendu.
  3. Dans un cas pur, comme dans cet exemple, vous devez connecter toutes les données via l'état du composant d'application, ce qui signifie que le composant ColorPicker change de couleur et le stocke dans l'état App, à partir duquel il met à jour les accessoires du composant Box en fonction de la valeur modifiée, mais si vous développez une application plus complexe. , vous devez organiser le stockage de données en utilisant la conception redux ou flux, qui sera également un bon moyen d’échanger des données entre plusieurs applications sur la même page.

Donc, ici code correct, qui implémente votre échantillon 

1
js-coder