Question

我有一个父类和一个子类。子类将根据从父级传递的属性执行初始加载操作。父类将使用子进程中的静态方法访问该数据。本质上，我正在尝试将子类用作服务。下面的代码说明了该场景（注意它只是伪代码）。

var Parent = React.createClass({

 componentDidMount: function() {
    console.log("parent component was mounted");
 },

  render: function() {
    return (
      <div>
        <Child param={this.props.param} />
        <p>Child.fetch('key')</p>
      </div>
    );
  }
});

var Child = React.createClass({
    getInitialState: function() {
        return {
            data: {}
        };
    },

    componentDidMount: function() {
        console.log("child component was mounted");

        $.ajax({
          url: "server/api.php",
        data: {
         param: param
        }
        }).done(function(response) {
          this.setState({data: response});
        }.bind(this));
    },

    statics: {
        get: function(key) {
            console.log('get requested for key: ' + key);

            var value = null; // default value

            if(this.data == null) { return value; }

            //get the value from the data based on the key

            return value;
        }
    },        

  render: function() {
    return (
      <h2>{this.props.param}</h2>
    );
  }
});

这里的问题是，从子类加载数据后，父级的render函数不会更新。 console.log结果的顺序是：

父渲染：请求key：key
已安装父组件
已安装子组件
=＆GT;应触发更新以重新呈现父

我不确定在加载子组件后是否只能触发父级的渲染功能一次。我猜不是，所以触发父级渲染方法的更新就足够了。任何建议，改进都是受欢迎的，因为这对我来说是相当新的。

Answer 1

您应该为您的Child组件添加一个回调道具，一旦数据加载，孩子就可以触发该回调道具。

在Parent方面，您只需致电this.forceUpdate()。

您所遇到的情况是预期的，因为Child组件的生命周期与您的Parent类的生命周期不同。

但是，您可能需要分析将加载逻辑移动到Parent的可能性，并将响应部分的呈现委托给每个子项。这也有助于提高性能，因为只需要一个HTTP请求来加载所有数据。

**代码**

var Parent = React.createClass({

 componentDidMount: function() {
    console.log("parent component was mounted");
 },

  render: function() {
    return (
      <div>
        <Child param={this.props.param} onDataLoaded={this.forceUpdate} />
        <p>Child.fetch('key')</p>
      </div>
    );
  }
});

var Child = React.createClass({
    getInitialState: function() {
        return {
            data: {}
        };
    },

    componentDidMount: function() {
        console.log("child component was mounted");

        $.ajax({
          url: "server/api.php",
        data: {
         param: param
        }
        }).done(function(response) {
          if (typeof this.onDataLoaded === 'function')
            this.onDataLoaded();
          this.setState({data: response});
        }.bind(this));
    },

    statics: {
        get: function(key) {
            console.log('get requested for key: ' + key);

            var value = null; // default value

            if(this.data == null) { return value; }

            //get the value from the data based on the key

            return value;
        }
    },        

  render: function() {
    return (
      <h2>{this.props.param}</h2>
    );
  }
});

ReactJs在子类的ComponentDidMount之后更新父级

1 个答案: