O que é {this.props.children} e quando você deve usá-lo?

Sendo um iniciante no mundo React, quero entender em profundidade o que acontece quando eu uso {this.props.children}e quais são as situações para usar o mesmo. Qual é a relevância disso no snippet de código abaixo?

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

O que é mesmo 'crianças'?

Os documentos do React dizem que você pode usar props.childrenem componentes que representam 'caixas genéricas' e que não conhecem seus filhos com antecedência. Para mim, isso realmente não esclareceu as coisas. Tenho certeza de que para alguns essa definição faz todo o sentido, mas não para mim.

Minha explicação simples do que this.props.childrenfaz é que ele é usado para exibir tudo o que você inclui entre as tags de abertura e fechamento ao invocar um componente.

Um exemplo simples:

Aqui está um exemplo de função sem estado usada para criar um componente. Novamente, uma vez que esta é uma função, não há thispalavra-chave, então apenas useprops.children

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

Este componente contém um <img>que está recebendo alguns propse depois é exibido {props.children}.

Sempre que este componente for invocado {props.children}também será exibido e esta é apenas uma referência ao que está entre as tags de abertura e fechamento do componente.

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

Em vez de invocar o componente com uma tag de fechamento automático, <Picture />se você invocar as tags de abertura e fechamento completas, <Picture> </Picture>você pode colocar mais código entre ele.

Isso separa o <Picture>componente de seu conteúdo e o torna mais reutilizável.

Referência: uma introdução rápida aos props.children de React

Suponho que você esteja vendo isso em um rendermétodo do componente React , assim (editar: sua pergunta editada de fato mostra isso) :

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é uma propriedade especial dos componentes React que contém qualquer elemento filho definido no componente, por exemplo, o divsinterior Exampleacima. {this.props.children}inclui esses filhos no resultado renderizado.

... quais são as situações para usar o mesmo

Você faria isso quando quiser incluir os elementos filho na saída renderizada diretamente, sem alterações; e não se você não o fez.

props.children representa o conteúdo entre as tags de abertura e fechamento ao invocar / renderizar um componente:

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

invocar / chamar / render Foo:

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