對兒童

Question

訪問方法，我有收到孩子，使這些兒童

component = React.createClass({  
    ...some JSX 

    {this.props.children} 

    ...some JSX 
)} 

在某些時候，我需要各地的孩子們循環，並呼籲它們公開的方法的組成部分。但是，孩子不是對象實例，而是React表示。

在本質上我想要做這樣的事情：

var children = this.props.children 
React.Children.forEach(children, function(child) { 
    child.someAction() 
}) 

什麼是實現這一目標的最佳途徑？

我在IRC上遇到過一種方法，它涉及克隆孩子，然後通過參考來訪問他們。雖然看起來有些複雜。

// in JSX 
{ 
    newChildren = React.Children.map(children, function(child) { 
    return React.CloneElement(child, {ref: child.ref}) 
    }) 
} 

然後做

childRefs = this.props.children.map(function(child) { 
    return child.ref 
}) 

var self = this; 
childRefs.forEach(function(ref){ 
    self.refs[ref].someAction() 
}) 

雖然，這種感覺就像我的工作對反應。

Answer 1

在Generel中，您應該始終嘗試使用外部進入方法並將數據視爲不可變的。

向所有兒童提供shouldValidate標誌作爲道具，然後讓所有孩子執行componentWillReceiveProps函數來進行驗證，這是我看到的首選方式。 組件應該在我看來從來沒有公開從外部調用的函數/屬性，因爲這違背了React的想法。

的JSX例如：

家長

render: function() { 
    return this.children.map(Child => { 
     return <Child shouldValidate={this.state.submitting}/> 
    }); 
} 

onSubmit: function() { 
    this.setState({ 
     submitting: true 
    }) 
} 

兒童

componentWillReceiveProps: (nextProps) => { 
    if (this.props.shouldValidate) { 
     validate(); 
    } 
}