將道具傳遞給普通兒童

Question

有沒有辦法將道具傳遞給一個普通的孩子（而不是你知道的組件）？

東西會使Wrapper能夠將foo傳遞給孩子。

var Wrapper = React.createClass({ 
    render: function() { 
     return <div> 
      {this.props.children foo={2}} 
     </div> 

    } 
}); 

var App = React.createClass({ 
    render: function() { 
     return (
      <Wrapper> 
       {this.props.foo} 
      </Wrapper> 
     ) 
    } 
}); 

jsfiddle

Answer 1

想象的Javascript代碼

this.props.children foo=2 

這是你的表達是transpiled成從JSX成純JS。事實是，你不能直接傳遞道具到children，因爲children不是React組件。爲了使它工作，你需要地圖通過兒童並通過你的道具每迭代項目。

那隨之而來的問題是，你不能簡單地做

this.props.children.map(child => (
    <Child foo={2} /> 
)) 

因爲，第一，您會收到類型錯誤，因爲map是不確定的，而第二，你會失去的每一個所有的初始道具兒童。

你需要使用React.Children.map靜態功能以及React.cloneElement，使其工作：

React.Children.map(children, child => React.cloneElement(child, { 
    foo: 2 
})) 

這樣，每個子元素保留了自己的道具從父元素傳遞，此外他們，接收你定義的新道具。請小心，因爲你可能會無意中重新定義一些道具的價值。然後

---

您的示例代碼看起來像

var Wrapper = React.createClass({ 
    render: function() { 
     const { 
      foo 
     } = this.props; 

     return (
      <div> 
       {React.Children.map(this.props.children, child => React.cloneElement(child, { 
        foo 
       }))} 
      </div> 
     ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
     return (
      <Wrapper foo={2}> 
       <div>I should be a component</div> 
       <div>I should be a component, too</div> 
       <div>We all should be components</div> 
      </Wrapper> 
     ); 
    } 
});