是否有推荐的模式将prop传递给React中的后代组件?
下面,我将道具callback传递给子组件:
callback
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(); } });
像这样两次传递该道具是否正确,还是应该以某种方式引用它的继承?
我transferPropsTo在文档中看到了一个方法,从日志记录来看,好像可以callback从子孙中获取方法,this.props.__owner__.props但是那些双下划线使我认为我不应该这样做。
transferPropsTo
this.props.__owner__.props
是的,这是惯用的。将每个组件都视为一个函数,其参数是props –从这种角度来看,显式传递props似乎更为正常。我们发现,使所有内容都明确是可以使事情更易于维护的功能,这样您就可以查看组件的所有输入内容以及所传递的内容。
(React的未来版本可能会包含一个称为“上下文”的功能,该功能使隐式传递内容成为可能,但可能会使代码难以推理,因此我几乎始终都倾向于显式。)
更新 (不是原始作者)
最终增加了文档(在2015年夏季至2016年夏季之间的某个时间,可能是0.14版中添加):
官方React Context文档。
注意,这也是react-redux简化商店通过层次结构传递的方式。
react-redux