思路:
1、在状态state中设置一个开关变量;
2、在render中把要渲染的组件(假设组件B)定义到return外面
3、在第一次render的时候,通过开关判断是否需要渲染
所以,第一次render的时候,开关是关的,就不进行组件B的渲染,当componentDidMount后,获取ajax返回数据,再改变state的状态,进行重新render
思路是条件渲染,设置一个判断条件,条件值不同,渲染的组件不同,下面是官网的一个例子
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);