这是我通常做的事情:
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> ); }}
这是将要发生的事情的细分…
- 组件即将加载
- 触发componentDidMount()并运行loadData()
- loadData()启动ajax请求,在ajax请求返回数据之前返回,因为我们喜欢异步数据加载
- render()运行。由于
this.state.data
isnull
,我们进入了if块,并<div />
返回了。 - Ajax数据加载完成,并进行了
this.setState()
调用,这将强制重新渲染。 - render()再次运行。由于
this.state.data
现在包含一个值,因此我们跳过if块并呈现常规内容。
编辑(2019年10月11日):将componentWillMount()迁移到componentDidMount()
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)