React:将props传递给后代

IT技术 reactjs
2021-04-25 11:49:02

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

下面,我将propscallback传递给子组件:

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>
    );
  }
});

然后callbackprop 被传递给后代组件:

ItemComp = React.createClass({
  render: function() {
    return (
      <li><a onClick={this.handleClick} href="#">Link</a></li>
    );
  },

  handleClick: function(e) {
    e.preventDefault();
    this.props.callback();
  }
});

像这样将props传递两次是否正确,或者我应该以某种方式引用它的继承?

transferPropsTo在文档中看到了一个方法,从日志记录来看,我似乎可以callback通过后代访问,this.props.__owner__.props但是那些双下划线让我觉得我不应该这样做。

1个回答

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

(React 的未来版本可能会包含一个名为“上下文”的功能,它可以隐式地传递信息,但它可能会使代码更难推理,所以我几乎一直都倾向于显式。)

更新(不是原作者)

文档终于被添加了(它是在 2015 年夏天和 2016 年夏天之间的某个时间添加的,可能是 0.14 版):

官方 React 上下文文档

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