Déclenchement de l'enfant re-rendu dans React.js
Le Parent (MyList
dans mon exemple) composant rend un tableau à travers un Enfant (MyComponent
) du composant. Parent décide de modifier les propriétés du tableau, qu'est-ce que Réagir de façon de déclenchement de l'enfant re-rendu?
Tous, je suis venu avec est this.setState({});
Parent après le fait de modifier les données. Est-ce un hack ou de Réagir de façon de déclencher une mise à jour?
JS Fiddle:
https://jsfiddle.net/69z2wepo/7601/
var items = [
{id: 1, highlighted: false, text: "item1"},
{id: 2, highlighted: true, text: "item2"},
{id: 3, highlighted: false, text: "item3"},
];
var MyComponent = React.createClass({
render: function() {
return <div className={this.props.highlighted ? 'light-it-up' : ''}>{this.props.text}</div>;
}
});
var MyList = React.createClass({
toggleHighlight: function() {
this.props.items.forEach(function(v){
v.highlighted = !v.highlighted;
});
//Children must re-render
//IS THIS CORRECT?
this.setState({});
},
render: function() {
return <div>
<button onClick={this.toggleHighlight}>Toggle highlight</button>
{this.props.items.map(function(item) {
return <MyComponent key={item.id} text={item.text} highlighted={item.highlighted}/>;
})}
</div>;
}
});
React.render(<MyList items={items}/>, document.getElementById('container'));
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous êtes le stockage de l'état dans
this.props
au lieu dethis.state
. Puisque cette composante est la mutation deitems
,items
est de l'état et doit être stocké dansthis.state
. (Voici un bon article sur les accessoires contre l'état.) Cela résout votre problème de rendu, parce que lorsque vous mettez à jouritems
vous pourrez appelersetState
, qui déclenche automatiquement un nouveau rendu.Voici ce que votre composant à l'aide de l'état au lieu d'accessoires:
Remarque que j'ai renommé le
items
prop àinitialItems
, car il est clair queMyList
va les transformer. C'est recommandé par la documentation.Vous pouvez consulter les mises à jour de violon ici: https://jsfiddle.net/kxrf5329/
Vous devez déclencher un nouveau rendu en appelant
setState()
et de donner les nouveaux supports que vous voulez propager vers le bas.Si vous voulez vraiment forcer une mise à jour, vous pouvez également appeler
forceUpdate()
.Si vous regardez les exemples de cette page, vous pouvez voir que
setState
est la méthode utilisée pour mettre à jour et de déclencher un nouveau rendu. Le la documentation déclare également (ahaha!) clairement.Dans votre cas, je voudrais appeler
forceUpdate
.EDIT: Comme la Jordanie mentionnées dans le commentaire, il serait préférable de stocker des éléments dans le cadre de votre état. De cette façon, vous n'aurez pas à l'appel
forceUpdate
mais vous voulez vraiment mettre à jour l'état de votre composant, donc régulièrementsetState
avec les valeurs mises à jour fonctionne mieux.>Normally you should try to avoid all uses of forceUpdate()
j'ai donc coincé avecsetState
. Je veux des enfants à réagir à changement de propriété. Comment l'économie de la liste des éléments mis en évidence dans le Parent aider dans cette situation? Je viens de la colonne vertébrale, donc, ces questions peuvent paraître idiot de Réagir monde.this.props.item[n].highlighted
est, par définition, l'état, car il n'est pas transmis à partir d'un composant parent, il est muté par ce composant.