node.js - react.js 从深度嵌套的子元素中更改最顶层父元素的状态

Question

我正在使用 react-async与 node.js 一起。 React-async 用于以异步方式使用 react.js。要进行 ajax 调用，我使用 super-agent . PostList组件是最顶层的父组件。通过其setTopmostParentState方法，可以更改组件的状态。我想从 Comp4 调用这个方法.此方法的参数将来自使用“ super 代理” Node 中间件的 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 会通知您的组件并重新呈现它。

您可以在此处了解有关 Flux 的更多信息 https://facebook.github.io/flux/