コンポーネントを動的に反応させ、コンポーネント内でカスタムJSXをオンザフライで追加しますか？

Question

<div className="header"> 
    <Card> 
     <div className="logo"> 
      <Logo /> 
     </div> 
     <div className="timer"> 
      <Timer /> 
     </div> 
    </Card> 
</div> 

このようなことを達成したいと思います。私はコンポーネントカードを作成しましたが、今はこのコンポーネントにランダムJSXと他のコンポーネントが含まれている必要があります。

React.Childrenメソッドを使用してReact Childrenを入れ子にする方法がありますが、コンポーネント内で追加のJSXを処理する方法を見つけることができません。

Answer 1

this.props.childrenをそのまま使用できます。

この特定のデータ構造を処理するには、React.Children utilitiesを使用できます。

例えば

あなたのケースであなただけのカード内のすべての子コンポーネント用のラッピングdiv要素を追加したい場合は、あなたが書くことができます。

const Card = React.createClass({ 
    render: function() { 
     const wrappedChildren = React.Children.map(
      this.props.children, 
      function(oneChild) { 
       return (
        <div className="wrappingDiv"> 
         {oneChild} 
        </div> 
       ); 
      }, 
     ); 
     return (
      <div className="cardContainer"> 
       {wrappedChildren} 
      </div> 
     ); 
    }, 
}); 

// then: 
<Card> 
    <Logo /> 
    <Timer /> 
</Card> 

Answer 2

このような何かを、

var ParentComponent = React.createClass({ 
    render : function(){ 
     var el = (<component_you_want_to_nest />); 
     return(
      <ComponentCardComponent nestComp={el} /> 
     ) 
    } 
}); 

var ComponentCardComponent = React.createClass({ 
render : function(){ 
    <div> 
     {this.props.nestComp} 
    </div> 
} 

}）;