小编典典

反应:将道具传递给后代

reactjs

是否有推荐的模式将prop传递给React中的后代组件?

下面,我将道具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但是那些双下划线使我认为我不应该这样做。


阅读 192

收藏
2020-07-22

共1个答案

小编典典

是的,这是惯用的。将每个组件都视为一个函数,其参数是props
–从这种角度来看,显式传递props似乎更为正常。我们发现,使所有内容都明确是可以使事情更易于维护的功能,这样您就可以查看组件的所有输入内容以及所传递的内容。

(React的未来版本可能会包含一个称为“上下文”的功能,该功能使隐式传递内容成为可能,但可能会使代码难以推理,因此我几乎始终都倾向于显式。)

更新 (不是原始作者)

最终增加了文档(在2015年夏季至2016年夏季之间的某个时间,可能是0.14版中添加):

官方React Context文档

注意,这也是react-redux简化商店通过层次结构传递的方式。

2020-07-22