Как легко передавать данные от ребенка в root в Reactjs?
-
20-12-2019 - |
Вопрос
У меня есть окно комментариев, как это:
Я связал все действия в компонент Commentbox, существует прежние действия для обработки события Delete
в каждом комментарии.
Каждый раз, когда я нажимаю кнопку delete
в Comment
, мне нужно пройти генеракодицетагкод commentId
для Comment
для CommentList
, а затем CommentBox
обновляет данные комментариев, удаляет этот комментарий от данных комментариев и повторно рендерирует список комментариев.
<Сильный> Вот какой-то код:
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();
}
},
... ...
})
.
Этот процесс слишком многослоев!Есть ли простой способ сделать это?
Решение
Вы также можете сделать частичное приложение обработчика, например:
<Comment onDel={this.handleDel.bind(null, c.id)} />
.
Когда называется this.handleDel
, c.id
будет передан как первый аргумент.Вы также можете сократить его, удалив генеракодицетагкод и просто делаю
<Comment onDel={this.props.onDel.bind(null, c.id)} />
.
Для немного больше информации об этой теме, см. Обмен между компонентами в реагированных документах.
Другие советы
Вы также можете попробовать управлять глобальным состоянием приложения, которое будет доступно для всех компонентов, прошедших по реквитациям.
На каждом изменении в состояние приложения вы можете повторно сделать все это.
По мере того, как вы Rerender от компонента верхнего уровня, вы можете попытаться оптимизировать с помощью shouldComponentUpdate
.Я не проверил это и не знаю, если он управляемый для большого приложения, однако.
Также посмотрите, как OM оптимизирует генеракодицетагкод, используя неизменные структуры данных.