this.props.children

1861 단어
this.props 대상의 속성은 구성 요소의 속성과 일일이 대응하지만 예외가 있습니다:this.props.children, 그는 구성 요소의 모든 하위 노드를 표시합니다.
var NotesList = React.createClass({
  render: function() {
    return (
      
    
      {
        React.Children.map(this.props.children, function (child) {
          return 
  1. {child}
    2. ;
        })
      }
      

    );
  }
});
ReactDOM.render(
  
    hello
    world
  ,
  document.body
);

위 코드의 NoteList 구성 요소는this를 통과할 수 있는 두 개의 스핀 서브노드가 있습니다.props.children 읽기.여기 주의가 필요해,this.props.children의 값은 세 가지가 있습니다.
  • 현재 구성 요소에 하위 노드가 없으면 undefined입니다.
  • 하위 노드가 있다면 데이터 유형은object이다.
  • 하위 노드가 여러 개인 경우 데이터 유형은 array
    • 입니다.
    React는 도구 방법 React.Children 을 제공합니다. this.props.children우리는 React.Children.map로 하위 노드를 훑어볼 수 있지만 this.props.children의 데이터 유형이 undefined인지 object인지는 걱정하지 않아도 된다.

    1.React.Children.map

    object React.Children.map(object children, function fn [, object context]) 모든 직접 하위 레벨 (children 매개 변수에 포함) 에서 fn 함수를 사용합니다. 이 함수의this는 상하문을 가리킵니다.만약 children 이 내장된 대상이나 그룹이라면, 범람할 것입니다. 용기 대상이fn에 전달되지 않습니다.만약 children 매개 변수가null 또는undefined라면, 빈 대상이 아니라null 또는undefined로 되돌아옵니다.

    2.React.Children.forEach

    React.Children.forEach(object children, function fn [, object context])는 React.Children.map()와 유사하지만 대상을 되돌려주지 않는다.

    3.React.Children.count

    number React.Children.count(object children)children의 구성 요소 총수를 되돌려줍니다. map 또는 forEach에 전달된 리셋 함수의 호출 횟수와 일치합니다.

    4.React.Children.only

    object React.Children.only(object children) 중 유일한 하위 레벨을 되돌려줍니다.그렇지 않으면 이상을 던진다.
    프로그램으로 자신의 미래에 대한 정보를 적어 보세요[슈퍼 초보자를 향해]
    "Bounds must be at least 50% within visible screen space"해결 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage