reactjs - react : Passing Props to Descendants

Question

是否有推荐的模式将 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 但那些双双下划线让我觉得我不应该。

Answer 1

是的，这是惯用语。将每个组件视为一个函数，其参数是 props - 从这个角度来看，显式传递 props 似乎更正常。我们发现，让所有内容都明确化可以使事情更易于维护，这样您就可以看到组件的所有输入是什么以及您正在传递什么。

(React 的 future 版本可能会包含一个名为“上下文”的功能，这使得隐式传递事物成为可能，但它可能会使代码更难以推理，所以我仍然倾向于几乎所有时间的显式性.)

更新(非原作者)

文档终于添加了(它是在 2015 年夏季到 2016 年夏季之间的某个时间添加的，可能是在版本 0.14 中添加的):

Official React Context Documentation .

请注意，这也是 react-redux 的方式简化了商店在层次结构中的传递。