동적 하위 컴포넌트를 가진 ReactJS 레이아웃 컴포넌트

Question

React 0.12.2를 사용하고 레이아웃 컴포넌트를 제공합니다. 트레이는 :

<div className="tray"> 
    <div className="tray__item tray__item--left" data-width="260px"> 
     Load a component in the left tray 
    </div> 
    <div className="tray__item tray__item--center"> 
     Load a component in the center tray 
    </div> 
    <div className="tray__item tray__item--right" data-width="100%"> 
     Load a component in the right tray 
    </div> 
</div> 

나는이 구성 요소에 인수로 전달, 내용의 각각에 임의의 구성 요소를 삽입 할 수 있도록하고 싶습니다.

아마도 같은 것을 : -이 컨테이너의 구성 요소가 "바보"입니다

<Carousel items={Component1,Component2,Component3,Component4}/> 

그냥 확실하게하려면 : 나는 또한 싶습니다

<Tray left={Component1} center={Component2} right={Component3}/> 

구성 요소 등의 알 수없는 양을 전달하는 방법을 알고 - 그들은 슬라이딩 컨텐츠에만 관심이 있습니다. 원하는 컨텐츠 (구성 요소)를 원하는 컨텐츠로 전달할 수 있어야합니다.

어떻게 처리하고 렌더링 할 수 있습니까? 감사.

Answer 1

의 구성 요소를 통과하고 싶지는 않을 이 경우, 즉

<Tray> 
    <TrayItem position="left"> 
    <SomeComponent/> 
    </TrayItem> 

    <TrayItem position="center"> 
    <div> 
     <AnotherComponent/> 
    </div> 
    </TrayItem> 

    <TrayItem position="right"/> 
</Tray> 

, 중첩이 패턴을 유지 할 수 있어야한다 TrayItem이의 렌더링도의 inclu해야 de {this.props.children}

컨테이너 구성 요소의 렌더링에 {this.props.children}이 포함되어있는 한 다른 구성 요소 안에 임의의 구성 요소를 넣을 수 있습니다.

Answer 2

렌더링 기능에 여러 하위 구성 요소가있는 컨테이너 구성 요소를 만들어야합니다. 당신은 당신이

<Tray> 
    <TrayItem position="left"/> 
    <TrayItem position="center"/> 
    <TrayItem position="right"/> 
</Tray> 

에게 당신을 할 수있는 당신이 당신의 트레이가 살고있는 구성 요소에 그런

render: function() { 
    return (
     <div className="tray"> 
     {this.props.children} 
     </div> 
    ); 
    } 

을 할 수있는 트레이의 렌더링 방법 소품으로

Answer 3

답변 해 주셔서 감사합니다. Adam Stone + SimpleJ.

var Tray = React.createClass({ 
    render: function() { 
     return (
      <div className="tray"> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

var TrayItem = React.createClass({ 
    render: function() { 
     return (
      <div className="tray__item"> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

<Tray> 
    <TrayItem> 
     <ComponentA/> 
     <ComponentAB/> 
    </TrayItem> 
    <TrayItem> 
     <ComponentB/> 
    </TrayItem> 
    <TrayItem> 
     <ComponentC/> 
    </TrayItem> 
</Tray>