ReactJS : Transferring Props

Question

저는 센서를 모니터링하기 위해 ReactJS에서 실시간 대시 보드 애플리케이션을 작성하는 중입니다. PHP에서 AutobahnJS + 웹 소켓을 사용하여 데이터를 스트리밍합니다.

이것은 구성 요소보기에서 내 대시 보드의 추상화입니다. Abstraction of dashboard in component view

Main.jsx :

class Main extends React.Component { 
constructor(props) { 
    super(props) 
} 

componentDidMount() { 
    $(document).foundation(); 

    var that = this; 

    var conn = new ab.Session('ws://xx.xxx.xxx.xx', function() { 
     conn.subscribe('', function(topic, data) { 
      console.log(data); 
      that.setState({ 
       result: data 
      }); 
     }); 
    }, function() { 
     console.warn('WebSocket connection closed'); 
    }, {'skipSubprotocolCheck': true}); 
} 
render() { 

    return (
     <div> 
      <div className="off-canvas-wrapper"> 
       <div className="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
        <div className="off-canvas position-right" data-position="right" id="offCanvas" data-off-canvas> 
         <SensorDetails/> 
        </div> 

        <div className="off-canvas-content" data-off-canvas-content> 
         <Nav/> 

         <div className="row"> 
          <div className="columns medium-12 large 12"> 
           {this.props.children} 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 
}; 

module.exports = Main; 

Main.jsx에서 BuildingList.jsx에 소품을 전달하는 적절한 방법은 무엇입니까?

{this.props.children} 

이 작동하지만 난 예를 들어, 내 링크에 액세스 할 수 없습니다 해요

<Dashboard data={this.state.result}/> 

로 : 난 대체 시도 계정 설정. 내 반응 라우터는 다음과 같이 설정됩니다.

<Router history={hashHistory}> 
    <Route path="/dashboard" component={Main} > 
     <Route path="/about" component={About} onEnter={requireLogin}/> 
     <Route path="/examples" component={Examples} onEnter={requireLogin}/> 
     <Route path="/accountSettings" component={AccountSettings} onEnter={requireLogin}/> 
     <IndexRoute component={Dashboard}/> 
    </Route> 
    <Route path="/" component={Login} onEnter={redirectIfLoggedIn}/> 
</Router> 

이 문제를 어떻게 해결할 수 있습니까? 감사.

Answer 1

음은 같은 데이터를 필요로 구성 요소를 많이 가질 수 있기 때문에

그것은, 정말 열심히 데이터 관리를합니다 .. 아래로부터 소품을 통과하도록 설계 반응한다.

플럭스 아키텍처 (예 : Redux)를 사용하는 것이 더 좋습니다 또는 Mobx와 같은 간단한 데이터 레이어.

는이 작업을 처리 할 수있는 몇 가지 방법이 있습니다

Answer 2

반작용에 (특별), 그들은 매우 다르기 때문에 각각 살펴보고 있지만, 데이터 관리와 함께 당신을 도울 수 있도록 설계해야한다.

사용할 수있는 한 가지 방법은 자녀를 Main.jsx 내부에 렌더링하는 것입니다. 자녀에게 두 개의 소품을 전달합니다 (state 및 updateState). 귀하의 하위 구성 요소에서

{React.Children.map(this.props.children, (child) => { 
    return React.cloneElement(child, { 
     state: this.state, 
     updateState: (state) => this.setState(state) 
    }); 
}} 

이를 호출하여 Main.jsx의 상태를 업데이트 할 수 있습니다.

this.props.updateState({prop: 'value'}) 

나는 이것이 React에서 가장 좋은 방법이라고 생각하지 않습니다. 나는 이벤트 접근법을 선호한다. 일반적으로 다음과 같이 "전 세계적으로 사용 가능한 상태"를 청취하고 업데이트 할 것입니다.

componentDidMount() { 
    App.Event.on('state.update', (state = {}) => this.setState(state)); 
} 

App.Event Main.jsx의

내부는과 같이 이벤트를 발사하여 호출 할 수있는 간단한 이벤트 시스템입니다.

App.Event.fire('state.change', {prop: 'value'});