Question

所以这就是我现在所拥有的，但它是从父母那里召唤孩子的最佳结构吗？

或者这会在应用程序使用期间引起进一步的问题吗？

之前我曾使用父级的渲染方法调用该类，但哪个更好？

var ApiResponseParent = React.createClass({

    getInitialState: function() {
    return {
        fbResponsesState: []
    }

  },

    componentDidMount: function() {
        console.log("parentMounted");
        this.serverRequest = axios.get(`url`)
          .then(res => {
            const fbResponsesState = res.data.fb_responses;
            this.setState({ fbResponsesState });
            console.log(this.state.fbResponsesState);
          });
  },

    componentDidUpdate: function () {
    console.debug('componentDidUpdate');
    return ReactDOM.render(<App fbResponses={this.state.fbResponsesState}/>, document.getElementById("example"));
  },

    render: function () {
        return null;
    }
});

var App = React.createClass({

  render: function () {

      var htmlTables;
      for (var i = 0; i < this.props.fbResponses.length; i++) 
      {
          var fbResponse = this.props.fbResponses[i].data;
          if (fbResponse.length > 0) 
          {

              htmlTables = (<div>
                  <table>
                     ....
                  </table>
              </div>);
          }
          else
          {
              htmlTables = "";
          }

      }
      return (htmlTables ? htmlTables : null);
  }

});

ReactDOM.render(<ApiResponseParent />, document.getElementById("root"));

Answer 1

当您重置状态时，React知道如何正确地重新渲染。 componentDidUpdate中的内容应该在ApiResponseParent的render方法中。并且，当XHR请求完成并且您设置了fbResponsesState时，React将使用App组件重新渲染组件，从而获得新的fbResponses。请记住，React仅在场景后面进行最低要求的更新，尽管我们称之为“重新渲染”。

render: function () {
    return (<App fbResponses={this.state.fbResponsesState}/>);
}

在react.js中从Parent调用子组件的最有效方法

1 个答案: