react.js 깊게 중첩 된 자식의 최상위 부모 요소 상태 변경

Question

react-async과 함께 node.js를 사용하고 있습니다. React-async는 비동기 방식으로 react.js를 사용하는 데 사용됩니다. 아약스 전화를 걸려면 super-agent을 사용하고 있습니다. PostList 구성 요소는 최상위 부모 구성 요소입니다. setTopmostParentState 메서드를 통해 구성 요소의 상태를 변경할 수 있습니다. 이 메서드를 Comp4에서 호출하고 싶습니다. 이 메소드의 매개 변수는 '슈퍼 에이전트'노드 미들웨어를 사용하는 ajax 호출에서 가져옵니다.

상태를 Comp4에서 어떻게 변경할 수 있습니까? 상위 구성 요소이고 하위 구성 요소 문제 인 경우 상태 변경 방법은 하위 구성 요소에 prop으로 쉽게 전달 될 수 있습니다. 그러나 일부 중첩으로 인해 깊이 중첩 된 자식에서 최상위 부모로 매개 변수를 전달하기가 어렵습니다.

코드 조각 :

이

var Comp4 = React.createClass({ 

     clickHandler: function() { 

     request.get('/api/prods_find/' + cat_id + '/' + subcat_id, 

      function(resp) { 

      var prods_menu = resp.body; 

* * * //CALL setTopmostParentState of the PostList component with the value prods_menu*** 

      }); 

     }, 
     render: function() { 
     '<div onClick={this.clickHandler}>Target element</div>' 

     } 

    }); 

    var Comp3 = React.createClass({ 

     render: function() { 

     <Comp4> < /Comp4> 

     } 

    }); 

    var Comp2 = React.createClass({ 

     render: function() { 

     <Comp3> < /Comp3> 

     } 

    }); 

    var Comp1 = React.createClass({ 

     render: function() { 

     <Comp2> < /Comp2> 

     } 

    }); 

    var PostList = React.createClass({ 

     mixins: [ReactAsync.Mixin], 

     getInitialStateAsync: function(cb) { 

     request.get('http://localhost:8000/api/posts', function(response) { 

      cb(null, { 
      prods_menu: response.body 
      }); 

     }); 

     }, 
     setTopmostParentState: function(prods_menu) { 

     this.setState({ 

      prods_menu: prods_menu 
     }); 
     }, 
     render: function() { 

     var prods = this.state.prods_menu.prods; 

     var menu = this.state.prods_menu.menu; 

     return (

      <Comp1> < /Comp1> 

     ); 
     } 

    }); 

Answer 1

특정 경우에, 나는 함수를 전달하는 제안은 당신의 깊은 아이 구성 요소에 의해 호출된다.

var Comp4 = React.createClass({ 

     clickHandler: function() { 

     request.get('/api/prods_find/' + cat_id + '/' + subcat_id, 

      function(resp) { 

      var prods_menu = resp.body; 
      this.props.updateParentState(prods_menu); 

      }); 

     }, 
     render: function() { 
     '<div onClick={this.clickHandler}>Target element</div>' 

     } 

    }); 

    var Comp3 = React.createClass({ 

     render: function() { 

     < Comp4 {...this.props} > < /Comp4> 

     } 

    }); 

    var Comp2 = React.createClass({ 

     render: function() { 

     < Comp3 {...this.props} > < /Comp3> 

     } 

    }); 

    var Comp1 = React.createClass({ 

     render: function() { 

     < Comp2 {...this.props} > < /Comp2> 

     } 

    }); 

    var PostList = React.createClass({ 

     mixins: [ReactAsync.Mixin], 

     getInitialStateAsync: function(cb) { 

     request.get('http://localhost:8000/api/posts', function(response) { 

      cb(null, { 
      prods_menu: response.body 
      }); 

     }); 

     }, 
     setTopmostParentState: function(prods_menu) { 

     this.setState({ 

      prods_menu: prods_menu 
     }); 
     }, 
     render: function() { 

     var prods = this.state.prods_menu.prods; 

     var menu = this.state.prods_menu.menu; 

     return (

      < Comp1 updateParentState={this.setTopmostParentState} > < /Comp1> 

     ); 
     } 

    }); 

그러나 알다시피이 작업은 상당히 번거롭습니다. 그래서 Flux가 만들어졌습니다. Flux를 사용하면 새 데이터가 포함 된 메시지를 Store에 전달할 수 있으며 Store는 Component에이를 알리고 다시 렌더링합니다.

당신은

Answer 2

https://facebook.github.io/flux/는 완벽 말을 안하지만,이 같은 상황에서 나는 구성 요소 통신에 PubSub 라이브러리를 사용하고 여기 플럭스에 대해 자세히 알아볼 수 있습니다. 예 : https://www.npmjs.com/package/pubsub-js.

var EVENT_NOTIFY_TOPMOST = "EVENT_NOTIFY_TOPMOST"; 
componentDidMount: function() { 
    eventToUnsubscribe = PubSub.subscribe(EVENT_NOTIFY_TOPMOST, function(msg, data){ 
     console.log(data); //logs "world" 
    }); 
} 

componentDidUnmount: function() { 
    //don't forget this 
    PubSub.unsubscribe(eventToUnsubscribe) 
} 

을 그리고 당신의 깊은 아이에서이 작업을 수행 할 수 있습니다 : 당신의 맨 위의 구성 요소에서

이 작업을 수행 할 수

PubSub.publish(EVENT_NOTIFY_TOPMOST , "world");