web-dev-qa-db-fra.com

Qu'est-ce que {this.props.children} et quand l'utiliser?

Étant un débutant dans le monde React, je veux comprendre en profondeur ce qui se passe lorsque j'utilise {this.props.children} et quelles sont les situations pour utiliser la même chose. Quelle est la pertinence de celui-ci dans l'extrait de code ci-dessous?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}
javascriptreactjsreact-reduxfrontend
69
Nimmy

Qu'est-ce que "les enfants"?

La documentation React indique que vous pouvez utiliser props.children sur les composants qui représentent des "boîtes génériques" et qui ne connaissent pas leurs enfants à l’avance. Pour moi, cela n’a pas vraiment éclairci les choses. Je suis sûr que pour certains, cette définition est parfaitement logique, mais elle ne l’a pas été pour moi.

Mon explication simple de ce que this.props.children fait est que , il est utilisé pour afficher tout ce que vous incluez entre les balises d’ouverture et de fermeture lors de l’appel d’un composant.

Un exemple simple:

Voici un exemple de fonction sans état utilisée pour créer un composant. Encore une fois, puisqu'il s'agit d'une fonction, il n'y a pas de mot clé this, utilisez donc simplement props.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

Ce composant contient un <img> qui reçoit un certain props, puis il affiche {props.children}.

Chaque fois que ce composant est appelé, {props.children} s'affiche également. Il ne s'agit que d'une référence à ce qui se trouve entre les balises d'ouverture et de fermeture du composant.

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Au lieu d'appeler le composant avec une balise à fermeture automatique <Picture /> si vous l'appelez, les balises d'ouverture et de fermeture complètes <Picture> </Picture> vous permettront de placer davantage de code entre elles.

Cela dissocie le composant <Picture> de son contenu et le rend plus réutilisable.

Référence: ne introduction rapide aux props.children de React

112
Soroush Chehresa

Je suppose que vous voyez ceci dans la méthode render d'un composant React, comme ceci (edit: votre question modifiée montre bien cela) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

children est une propriété spéciale de React components qui contient tous les éléments enfants définis dans le composant, par exemple. divs à l'intérieur de Example ci-dessus. {this.props.children} inclut ces enfants dans le résultat rendu.

... quelles sont les situations pour utiliser la même chose

Vous le feriez lorsque vous souhaitez inclure les éléments enfants dans la sortie rendue directement, sans modification. et pas si vous ne l'avez pas fait.

15
T.J. Crowder