是否有推荐的模式将 props 传递给 React 中的后代组件?
下面,我将 propcallback
传递给子组件:
Master = React.createClass({
render: function() {
return (
<div>
<ListComp items={this.props.items} callback={this.handleClick} />
</div>
);
}
});
ListComp = React.createClass({
render: function() {
this.props.items.forEach(function(item) {
items.push(<ItemView item={item} callback={this.props.callback} />);
}, this);
return (
<ul>{items}</ul>
);
}
});
然后 callback
属性被传递给后代组件:
ItemComp = React.createClass({
render: function() {
return (
<li><a onClick={this.handleClick} href="#">Link</a></li>
);
},
handleClick: function(e) {
e.preventDefault();
this.props.callback();
}
});
像这样将 prop 传递两次是否正确,还是我应该以某种方式引用它的继承?
我在文档中看到一个 transferPropsTo
方法,从日志记录看来我可以通过 this.props.__owner__ 从后代获取
但那些双双下划线让我觉得我不应该。callback
。 props
最佳答案
是的,这是惯用语。将每个组件视为一个函数,其参数是 props - 从这个角度来看,显式传递 props 似乎更正常。我们发现,让所有内容都明确化可以使事情更易于维护,这样您就可以看到组件的所有输入是什么以及您正在传递什么。
(React 的 future 版本可能会包含一个名为“上下文”的功能,这使得隐式传递事物成为可能,但它可能会使代码更难以推理,所以我仍然倾向于几乎所有时间的显式性.)
更新(非原作者)
文档终于添加了(它是在 2015 年夏季到 2016 年夏季之间的某个时间添加的,可能是在版本 0.14 中添加的):
Official React Context Documentation .
请注意,这也是 react-redux
的方式简化了商店在层次结构中的传递。
关于reactjs - react : Passing Props to Descendants,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21758103/