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

Question

Étant un débutant dans le monde de React, je veux comprendre en profondeur ce qui se passe lorsque j'utilise {this.props.children} et quelles sont les situations pour les utiliser. Quelle est la pertinence de ce code 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>
    );
  }
}

Answer 1

Qu'est-ce qu'un "enfant" ?

La documentation de React indique que vous pouvez utiliser props.children sur des 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 clarifié les choses. Je suis sûr que pour certains, cette définition est parfaitement logique, mais ce n'est pas le cas pour moi.

Ma simple explication de ce que this.props.children c'est que il est utilisé pour afficher ce que vous incluez entre les balises d'ouverture et de fermeture lorsque vous invoquez un composant.

Un exemple simple :

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

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

Ce composant contient un <img> qui reçoit des props et ensuite il affiche {props.children} .

Chaque fois que ce composant est invoqué {props.children} s'affiche également. Il s'agit simplement 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'invoquer le composant avec une balise de fermeture automatique <Picture /> si vous l'invoquez, il remplira les balises d'ouverture et de fermeture <Picture> </Picture> vous pouvez alors placer plus de code entre eux.

Cela permet de découpler le <Picture> de son contenu et le rend plus réutilisable.

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

Answer 2

props.children représente le contenu entre les balises d'ouverture et de fermeture lors de l'appel/du rendu d'un composant :

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

invoquer/appeler/rendre Foo :

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>

Answer 3

Je suppose que vous voyez ceci dans un composant React. render comme ceci (edit : votre question éditée montre en effet 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 des composants React qui contient tous les éléments enfants définis dans le composant, par exemple l'élément 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 les mêmes

Vous le ferez si vous voulez inclure les éléments enfants dans la sortie rendue directement, sans modification ; et non si vous ne le voulez pas.

Answer 4

On a répondu à cette question, mais je voulais ajouter un exemple d'optimisation. Vous pouvez décomposer en ligne pour n'obtenir que des propriétés spécifiques au lieu de l'objet props entier (ce qui signifie que vous n'avez pas à continuer d'écrire props ).

const MyView = ({title, children}) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
}

Alors vous l'utiliserez comme ça :

import { MyView } from './MyView';

const MyParentView = () => {
  return (
    <MyView title="Hello">
      <h2>World</h2>
    </MyView>
  );
}

Le résultat final serait du HTML qui donnerait quelque chose comme ceci :

<div>
  <h1>Hello</h1>
  <h2>World</h2>
</div>