Come passare facilmente i dati dal bambino a radice in reactjs?
-
20-12-2019 - |
Domanda
Ho una casella di commento come questa:
Ho legato tutte le azioni a CommentBox Component, vi è un'azione di decomment per gestire l'evento Delete
in ogni commento.
Ogni volta che faccio clic sul pulsante delete
in Comment
sono necessario passare il commentId
di Comment
a CommentList
a CommentBox
e quindi CommentBox
Aggiornamenti dei dati dei commenti, rimuove il commento dei dati dei commenti e rieduttura l'elenco dei commenti.
Ecco alcuni codici:
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();
}
},
... ...
})
.
Questo processo troppo verboso!C'è un modo semplice per farlo?
Soluzione
Puoi anche fare un'applicazione parziale del gestore A, come:
<Comment onDel={this.handleDel.bind(null, c.id)} />
.
Quando viene chiamato this.handleDel
, c.id
verrà passato come primo argomento.Puoi anche accorciarlo rimuovendo CommentList.handleDel
e semplicemente facendo
<Comment onDel={this.props.onDel.bind(null, c.id)} />
.
Per un po 'più informazioni su questo argomento, vedere Comunicare tra i componenti nei documenti reagire.
Altri suggerimenti
Puoi anche provare a gestire uno stato di applicazione globale che sarà disponibile per tutti i componenti, passati da oggetti di scena.
Su ogni modifica allo stato di applicazione, è possibile ri-rendering il tutto.
Come ripenditore dal componente di livello superiore potresti provare ad ottimizzare con shouldComponentUpdate
.Non ho testato questo e non lo so se è gestibile per una grande applicazione.
Inoltre, dai un'occhiata a come om ottimizzando shouldComponentUpdate
utilizzando strutture di dati immutabili.