在获取所有信息之前，如何阻止要渲染的React组件？

这是我通常做的事情：

class Login extends React.Component {    constructor(props) {        //IMPLEMENT OTHER JUNK HERE        this.state = { data: null //This is what our data will eventually be loaded into        };    }    componentDidMount() {        this.loadData();    }    loadData() {            }    render() {        if (!this.state.data) { return <div />        }        //WE HAVE DATA, DO A NORMAL RENDER        return ( <div id="login-page">     <div className="container-fluid">         <div className="row">  <div className="col-md-2">      <link to="/" className="home-link"><img src={base_URL + '/assets/img/logo.svg'} alt="Logo" /></link>  </div>         </div>         <div className="row">  <div className="col-lg-4 col-lg-offset-4">      <h1><FormattedMessage {...messages.loginPageTitle} /></h1>  </div>         </div>         {React.cloneElement(this.props.children || <div />, { onSubmit: this.handleFormSubmit, login: this.props.login })}     </div> </div>        );    }}

这是将要发生的事情的细分…

1. 组件即将加载
2. 触发componentDidMount（）并运行loadData（）
3. loadData（）启动ajax请求，在ajax请求返回数据之前返回，因为我们喜欢异步数据加载
4. render（）运行。由于

   this.state.data

   is

   null

   ，我们进入了if块，并

   <div />

   返回了。
5. Ajax数据加载完成，并进行了

   this.setState()

   调用，这将强制重新渲染。
6. render（）再次运行。由于

   this.state.data

   现在包含一个值，因此我们跳过if块并呈现常规内容。

编辑（2019年10月11日）：将componentWillMount（）迁移到componentDidMount（）