Что такое {this.props.children} и когда вы должны его использовать?

Будучи новичком в мире React, я хочу глубоко понять, что происходит, когда я использую {this.props.children} и в каких ситуациях использовать то же самое. Какова актуальность этого в приведенном ниже фрагменте кода?

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

Ответ 1

источник

Что вообще такое дети?

Документы React говорят, что вы можете использовать props.children для компонентов, которые представляют "общие блоки" и которые не знают своих потомков заранее. Для меня это не совсем прояснилось. Для некоторых я уверен, что это определение имеет смысл, но не для меня.

Мое простое объяснение того, что делает this.props.children, заключается в том, что он используется для отображения того, что вы включаете между открывающим и закрывающим тегами при вызове компонента.

Простой пример:

Вот пример функции без сохранения состояния, которая используется для создания компонента. Опять же, поскольку это функция, this ключевое слово отсутствует, поэтому просто используйте props.children

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

Этот компонент содержит <img> который получает некоторые props а затем отображает {props.children}.

Всякий раз, когда этот компонент вызывается, {props.children} также будет отображаться, и это всего лишь ссылка на то, что находится между открывающим и закрывающим тегами компонента.

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

Вместо того, чтобы вызывать компонент с самозакрывающимся тегом <Picture/> если вы вызываете его, будут открываться и закрываться теги <Picture> </Picture>, тогда вы можете поместить больше кода между ним.

Это <Picture> компонент <Picture> от его содержимого и делает его более пригодным для повторного использования.

Ссылка: краткое введение в Reacts props.children

Ответ 2

Я предполагаю, что вы видите это в методе render компонента React, вроде этого (отредактируйте: ваш отредактированный вопрос действительно показывает это):

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>