종속성 주입 - 하위 구성 요소를 부모 구성 요소로 전달

Question

하위 구성 요소를 상위 구성 요소의 소품으로 전달하는 것이 관례/표준 방법은 무엇인지 결정하려고합니다.

const Clazz = React.createClass({ 

    render: function(){ 

     return (
      <this.props.A/> 
      <this.props.B/> 
      {this.props.children} 
     ) 
    } 
}); 

내가이 구성 요소를 렌더링 할 말, 그리고 : 나는 ....이의 좋은 예를 찾을 수 있으며,이 this.props.children와 아무 상관이 있는지 확인하기 위해 고군분투하고 나는 단순한 반작용 부품과 같이 말해봐 위와 같이 두 개의 하위 구성 요소를 전달하십시오. 위의 그림에서 보듯이 구성 요소 C의 하위 요소를 소품을 통해 전달하고 싶습니다. 내가 이해하지 못했던 것 - 이것은 this.props.children을 사용하는 것과는 다른가요? 내가 여기서 한 일이 충분히 좋은거야? 소품으로 어린이를 전달하는 관용적 인 방법은 무엇입니까?this.props.children? 몇 달 후 나는 아직도 this.props.children이 무엇인지 알지 못한다. 나는 this.props.children이 React에 의해 설정되고 내가 이 아니라고 가정한다.은 그 값을 설정해야하지만 확실하지는 않다. 그래서 전체 샘플은 다음과 같이 보일 것이다

render: function(){ 
    return (
     {this.props.children} 
) 
} 

을 : 그래서 같은 방법을 렌더링/

ReactDOM.render(<Clazz> 
     {A} 
     {B} 
    </Clazz>, document.getElementById('root')) 

및 액세스를 clazz에 그들을 렌더링 :

Answer 1

JSX를 사용할 때 React.createElement 이상의 구문 설탕을 사용하고 있습니다.

어린이는 React.createElement의 세 번째 인수로 변환되는 JSX의 구성 요소 태그 안에 중첩됩니다.

React.createElement(
    type, 
    [props], 
    [...children] 
) 

그래서 JSX

:

<Clazz A={A} B={B}> 
    'Hello' 
</Clazz> 

이로 번역 것 :

const element = React.createElement(
    'Clazz', 
    {A: A, B: B}, 
    'Hello' 
); 

props.children 때로는 배열, 때로는 없습니다. 이 때문에 React는 그들과 함께 일할 수있는 유틸리티를 가지고 있습니다. 자세한 내용은 여기를 참조하십시오 : https://facebook.github.io/react/docs/react-api.html#react.children

결국 모든 기능이 "컴파일"됩니다. 구성 요소가 공장에서 작동하기 전에 무엇이 렌더링되는지 알 수없는 경우 구성 요소를 소품으로 전달하는 것이 좋습니다.

그러나 부모 렌더링 메서드를 통해 표시 될 일부 콘텐츠를 단순히 "피드"하려면 자식을 사용하는 것이 더 적절합니다.

함께 작업 한 경우 Angular의 "transclude"와 유사합니다.

어린이는 언제나 반응 요소가되며 소품은 무엇이든 될 수 있습니다. 일반적으로 사람들은 어린이들이 제공된대로 렌더링 될 것이라고 기대하지만 소품에는 콘텐츠 출력에 영향을주는 명확한 정의 된 동작이있을 것이라고 생각합니다.

추가 참고
더 정확하게하려면 React.createElement 3 개 이상 인수를 전달할 수 있습니다. 그러나 세 번째부터 시작하여 그들은 아이들입니다.

Babel repl로 this example where there is more than one child in JSX/React.createElement을 확인할 수 있습니다.

Answer 2

당신과 같이 직접 아이들을 전달할 수 있습니다

const Clazz = React.createClass({ 
    render: function(){ 
    return (
     {this.props.children} 
    ) 
    } 
}); 

const A = React.createClass({ 
    render:() => 'a'; 
}) 

const B = React.createClass({ 
    render:() => 'b'; 
}) 


ReactDOM.render(<Clazz>{A}{B}</Clazz>, document.getElementById('root'));