L'imbrication réagit dynamiquement aux composants, en ajoutant un JSX personnalisé à la volée dans le composant?

Question

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

Je veux réaliser quelque chose comme ça. J'ai créé une carte de composant, maintenant je veux que ce composant devrait contenir n'importe quel JSX aléatoire aussi bien que d'autres composants.

J'ai le moyen d'imbriquer React enfants en utilisant la méthode React.Children, mais je ne suis pas capable de trouver, comment gérer le JSX supplémentaire à l'intérieur du composant.

Answer 1

Vous pouvez simplement utiliser this.props.children.

Pour gérer cette structure de données spécifique, vous pouvez utiliser le React.Children utilities.

Par exemple, si dans le cas où vous voulez juste ajouter un div d'emballage pour chaque composant enfant dans la carte, vous pouvez écrire:

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

quelque chose comme ça,

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

});