ReactJS组件的异步渲染

有两种处理方法，您可以选择哪种方法取决于应该拥有数据的组件和加载状态。

1. 将Ajax请求移至父级并有条件地渲染该组件：

        var Parent = React.createClass({      getInitialState: function() {        return { data: null };      },      componentDidMount: function() {        $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {          this.setState({data: data});        }.bind(this));      },      render: function() {        if (this.state.data) {          return <CategoriesSetup data={this.state.data} />;        }        return <div>Loading...</div>;      }    });

1. 将Ajax请求保留在组件中，并在加载时有条件地渲染其他内容：

        var CategoriesSetup = React.createClass({      getInitialState: function() {        return { data: null };      },      componentDidMount: function() {        $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {          this.setState({data: data});        }.bind(this));      },      render: function() {        if (this.state.data) {          return <Input type="select">{this.state.data.map(this.renderRow)}</Input>;        }        return <div>Loading...</div>;      },      renderRow: function(row) {        return <OptionRow obj={row} />;      }    });