Comment transmettre facilement des données de l'enfant à la racine dans Reactjs ?
-
20-12-2019 - |
Question
J'ai une boîte de commentaire comme celle-ci :
J'ai lié toutes les actions au composant CommentBox, il y a une action decComment à gérer Delete
événement dans chaque commentaire.
Chaque fois que je clique sur le delete
bouton dans Comment
Je dois passer le commentId
de Comment
à CommentList
à CommentBox
et puis CommentBox
met à jour les données de commentaires, supprime ce commentaire des données de commentaires et restitue la liste des commentaires.
Voici un peu de code :
var Comment = React.createClass({
handleDel: function() {
var cid = this.props.cid;
this.props.onDel(cid);
return false;
},
render: function() {
return (
<div key={this.props.cid}>
<a onClick={this.handleDel}>Del</a>
</div>
);
}
});
var CommentList = React.createClass({
handleDel: function(cid) {
this.props.onDel(cid);
},
render: function() {
var commentNodes = this.props.data.map(function(c) {
return <Comment cid={c.id} onDel={this.handleDel} />
}.bind(this));
return (
<div className="comments">
{commentNodes}
</div>
)
}
});
var CommentBox = React.createClass({
... ...
delComment: function (cid){
function del(data) {
$.ajax({
url: url,
type: 'delete',
dataType: 'json',
data: data,
success: function (e) {
if (e.retcode === 0) {
that.setState({
data: e.data
});
} else {
alert(e.error);
}
}
});
}
if (window.confirm('You Sure ?')) {
del();
}
},
... ...
})
Ce processus est trop verbeux !Existe-t-il un moyen simple de procéder ?
La solution
Vous pouvez également faire une application partielle du gestionnaire a, comme ceci :
<Comment onDel={this.handleDel.bind(null, c.id)} />
Quand this.handleDel
est appelé, c.id
sera passé comme premier argument.Vous pouvez également le raccourcir en supprimant CommentList.handleDel
et je fais juste
<Comment onDel={this.props.onDel.bind(null, c.id)} />
Pour un peu plus d'informations sur ce sujet, voir Communiquer entre les composants dans la documentation React.
Autres conseils
Vous pouvez également essayer de gérer un état global de l'application qui sera disponible pour tous les composants, transmis par les accessoires.
À chaque modification de l’état de l’application, vous pouvez restituer le tout.Lors du rendu à partir du composant de niveau supérieur, vous pouvez essayer d'optimiser avec shouldComponentUpdate
.Je n'ai pas testé cela et je ne sais pas si c'est gérable pour une grande application.
Jetez également un œil à la façon dont Ôm optimise shouldComponentUpdate
en utilisant des structures de données immuables.