反应：将道具传递给后代

是否有将道具传递给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，并从记录它看起来像我可以从后代通过this.props.__owner__.props得到callback但是那些两双下划线让我觉得我不应该。

来源

2014-02-13 cantera

我看到通过回调两次没有问题。它需要多一点打字，但它明确而易于理解。 – NVI

是的，这是惯用的。将每个组件看作一个功能，其参数就是道具 - 从这个角度来看，传递道具显然看起来更加正常。我们发现它让事情变得更加可维护，让所有事情都变得明确，这样您就可以看到组件的所有输入是什么，以及您传递的是什么。（未来版本的React可能会包含一个名为“contexts”的特性，这个特性可以隐式传递，但它可能会使代码更难以推理，所以我仍然偏爱几乎所有的。时间）

UPDATE（而不是由原作者）

文档终于被添加（它增加了夏季2015年夏季至2016年间的某个时候，可能与发行0.14）：

Official React Context Documentation。

请注意，这也是react-redux如何简化商店通过层次结构的传递。

来源

2014-02-13 15:57:48

与适中大小的Angular JS应用程序一起工作时，“上下文”功能听起来像Angular的示波器机制，听起来令人困惑。 $范围与$ rootScope，范围注入......当前版本的React（0.8.0）的明确性赢得了我的赞赏，并让普通的老JS范围规则。 –

@ssorallen我们非常清楚这一点。上下文目前在master中可用，但它们没有记录，并且可能会发生变化，因为我们希望确保清楚。上下文可能永远是最多可选的高级功能。 –

太棒了。我确信在框架内它是有用的，并在一些古怪的用例。 –

反应：将道具传递给后代

回答

相关问题