Verschachteln Reagieren Komponenten dynamisch, Hinzufügen von benutzerdefinierten JSX on the fly innerhalb der Komponente?

Question

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

möchte ich so etwas wie dies zu erreichen. Ich habe eine Komponente Card erstellt, jetzt möchte ich, dass diese Komponente beliebige JSX sowie andere Komponenten enthalten sollte.

ich die Art und Weise der Verschachtelung bekommen habe Reagieren Kinder mit React.Children Methode, aber ich bin nicht finden kann, wie die zusätzliche JSX im Innern des Bauteils zu behandeln.

Answer 1

Sie können einfach this.props.children verwenden.

diese spezielle Datenstruktur umgehen, können Sie die React.Children utilities verwenden können.

Zum Beispiel, wenn in Ihrem Fall, dass Sie nur eine Verpackung div für jedes Kind Komponente in Karte hinzufügen möchten, können Sie schreiben:

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

dies so etwas wie Sie,

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> 
} 

});