小道具を一般の子供に渡す

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

これはあなたの表現は、プレーンJSにJSXからにtranspiledされたものである

this.props.children foo=2 

Javascriptコードを想像してみてください。事実、childrenは反応成分ではないので、childrenに直接小道具を渡すことはできません。それを動作させるには、子どもを介しての地図を作成し、iterableの各項目ごとに小道具を渡す必要があります。

次に来る問題はmapが定義されていないので、まず、あなたはTypeError例外を受け取りますので、あなたは、単に

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

を行うことができない、そして第二に、あなたはすべてのすべての最初の小道具を失うだろうということです子。あなたはそれを動作させるために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> 
     ); 
    } 
});