React.Children

근원React.Children 은 최상 위 API 중 하나 로 폐쇄 된 데이터 구 조 를 처리 하 는 데 유용 한 도 구 를 제공 했다.this.props.children 대상 의 속성 은 구성 요소 의 속성 과 일일이 대응 하지만 예외 가 있 습 니 다. 바로 this.props 속성 입 니 다.구성 요소 의 모든 하위 노드 를 표시 합 니 다.
1、 this.props.children

object React.Children.map(object children, function fn [, object context])

    ：
React.Children.map(this.props.children, function (child) {
    return 
{child}
;
})

    
this.props.children.forEach(function (child) {
    return 
{child}
})

모든 직접 하위 급 (children 매개 변수 에 포 함 된) 에서 fn 함 수 를 상 향 조정 합 니 다. 이 함수 의 this 는 문맥 을 가리 키 고 있 습 니 다.children 이 내 장 된 대상 이나 배열 이 라면 옮 겨 다 닐 것 입 니 다. 용기 대상 이 fn 에 들 어가 지 않 습 니 다.children 인자 가 null 또는 undefined 라면 빈 대상 이 아 닌 null 또는 undefined 로 돌아 갑 니 다.

<script type="text/jsx">
  var NotesList = React.createClass({
    render: function() {
      return (
        <ol>
          {
            React.Children.map(this.props.children, function (child) {
                    return <li>{child}li>;
                })
          }
        </ol>
      );
    }
  });

  React.render(
    
      hellospan>
      <span>hellospan>
    NotesList>,
    document.body
  );
script>

여기 서 주의해 야 할 것 은 React.Children.map 의 값 은 세 가지 가능성 이 있 습 니 다. 현재 구성 요소 에 하위 노드 가 없 으 면 this.props.children 입 니 다.만약 에 키 노드 가 있다 면 데이터 형식 은 undefined 이다.만약 여러 개의 키 노드 가 있다 면 데이터 형식 은 object 이다.그 러 니 처리 array 할 때 조심해 야 한다.this.props.children 도구 방법 React 을 제공 하여 처리 합 니 다 React.Children.우 리 는 this.props.children 로 하위 노드 를 옮 겨 다 닐 수 있 습 니 다. React.Children.map 의 데이터 유형 이 this.props.children 인지 undefined 인지 걱정 하지 않 아 도 됩 니 다.
다음 ReactElement 에 들 어 갑 니 다:

<NotesList>
   <span>hellospan>
   <span>hellospan>
NotesList>
//       


<NotesList>NotesList>
//  undefined


<NotesList>nullNotesList>
//  null

2、 object
React.Children.forEach(object children, function fn [, object context])
React. Children. map () 와 유사 하지만 대상 을 되 돌려 주지 않 습 니 다.
3、 React.Children.forEach
number React.Children.count(object children)
children 의 구성 요소 총 수 를 되 돌려 줍 니 다. map 나 foreach 에 전달 되 는 호출 횟수 와 일치 합 니 다.

render: function() {
    console.log(React.Children.count(this.props.children)); //2

    return (
      

        {
          this.props.children.forEach(function (child) {
              return 
{child}
          })
        }
      
    );
  }

다른 ReactElement, 출력 count 값:

    hello
    hello

console.log(React.Children.count(this.props.children)); //2


console.log(React.Children.count(this.props.children)); //0

null
console.log(React.Children.count(this.props.children)); //1

4、 React.Children.count
object React.Children.only(object children) React.Children.only 에 있 는 하위 레벨 을 되 돌려 줍 니 다.그렇지 않 으 면 이상 을 던 져.
여기 있 는 하위 레벨 만 있 습 니 다. only 방법 으로 받 아들 이 는 매개 변 수 는 하나의 대상 일 뿐 여러 개의 대상 (배열) 이 될 수 없습니다.

console.log(React.Children.only(this.props.children[0])); 
//    this.props.children[0]