다른 반응 구성 요소에 반응 구성 요소를 동적으로 삽입하십시오.

Question

지금 당장에는 다양한 양식과 정보 비트에 사용할 사이드 바가 있습니다. 글로벌 이벤트 시스템을 사용하여 사이드 바 열기를 시작했지만 사이드 바 반응 구성 요소에 반응 구성 요소를 주입하는 방법을 모르겠습니다.

나는이

componentWillMount: -> 
    window.toggleSidebar = (react_component)=> 
    React.renderComponent(react_component(), document.getElementById('sidebar-content')) 
    @toggleSidebar() 

을 시도하여 시작하지만 이것은 다른 구성 요소 내에있는 요소로 구성 요소를 렌더링 호출 할 수 있기 때문에 모든 구성 요소가 설치되면 작동하지 않았다.

반응 구성 요소를 다른 구성 요소로 전달할 수있는 방법이 있습니까?

Answer 1

실제로 구성 요소 인스턴스를 전달하지 않고 구성 요소를 렌더링하는 데 사용할 수있는 구성 요소 팩터 리 및 데이터를 전달하려고합니다.

events.emit('sidebar-change-request', {component: Foo, props: obj, open: true}); 

그리고

사이드 바 구성 요소에서이 이벤트를 수신 할 것 : 당신이 다시 사이드 바에서 renered 구성 요소의 일부 정보를 얻기 위해 필요한 경우

getInitialState: -> component: React.DOM.div, props: {}, open: false 

    # standard event emitter stuff  
    componentDidMount: -> 
    events.addListener 'sidebar-change-request', this.handleSidebarChangeRequest 

    componentWillUnmount: -> 
    events.removeListener 'sidebar-change-request', this.handleSidebarChangeRequest 

    # simply apply the payload to state 
    handleSidebarChangeRequest: (payload) -> 
    this.setState payload 

    # dynamically render stuff 
    render: -> 
    if this.state.open 
     React.DOM.div {className: "sidebar"}, 
      this.state.component this.state.props 
    else 
     React.DOM.div null 

것은, 당신이 콜백을 전달할 것 소품을 통해 그 구성 요소에; 또는 구성 요소가 이벤트를 방출 할 수 있습니다.