{this.props.children}은 무엇이며 언제 사용해야합니까?

React world의 초심자이기 때문에 사용할 때 어떤 일이 발생 {this.props.children}하고 같은 상황을 사용하는지 깊이 이해하고 싶습니다 . 아래 코드 스 니펫에서 그것의 관련성은 무엇입니까?

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

'어린이'란 무엇입니까?

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>구성 요소가 콘텐츠에서 분리되어 재사용이 가능해집니다.

참조 : React의 props.children에 대한 간략한 소개

다음과 같이 React 구성 요소의 render메서드 에서 이것을 본다고 가정합니다 (편집 : 편집 된 질문은 실제로 그것을 보여줍니다) :

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컴포넌트 내에 정의 된 자식 요소 (예 : 위 의 divs내부) 를 포함하는 React 컴포넌트의 특별한 속성입니다 Example. {this.props.children}렌더링 된 결과에 해당 하위를 포함합니다.

... 같은 것을 사용하는 상황은 무엇입니까

렌더링 된 출력에 자식 요소를 변경하지 않고 직접 포함하고 싶을 때 수행합니다. 그렇지 않은 경우에는 아닙니다.

props.children 구성 요소를 호출 / 렌더링 할 때 여는 태그와 닫는 태그 사이의 내용을 나타냅니다.

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

호출 / 호출 / 렌더링 Foo:

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