React入门-5.条件渲染

条件渲染

条件渲染很是简单，在render函数中返回不一样的react element便可。在下面的例子中，我在state中维护了一个变量user。render函数对该变量进行判断，若是user有值，返回欢迎界面，不然返回登陆页面。这是经典数据驱动的思想，数据决定页面的渲染。

// 用户登陆成功后，将用户设置为全局变量
  window.user = {name:"terry"}

  class MyDiv extends React.Component{
    constructor(props){
      super(props);
      this.state = {user : null}
    }
    // 用户点击登陆按钮时候执行该函数，该函数中修改state中user的取值。而且阻止事件的默认行为
    login=(event)=>{
      this.setState({
        user:window.user
      })
      event.preventDefault();
    }
    // 渲染，当state中维护的user为不存在的时候，显示"请登陆"，不然显示"欢迎您,xxx"
    render(){
      if(this.state.user){
        return (
          <div>欢迎您，{this.state.user.name } </div>
        )
      } else {
        return (
          <div>
            <a href="#" onClick={this.login}>请登陆</a>
          </div>
        )
      }
    }
  }

  ReactDOM.render(<MyDiv/>,document.getElementById('app'));

另外，写这个案例的时候遇到一些坑

1. 经过setState来修改state中的变量，不能直接修改。这个在以前已经提过了，这里再强调一些
2. setState函数式异步的，也就是说，若是在设置完成后咱们直接打印this.state.user有可能出现的不是你想要的结果
3. 在JSX中，咱们不能直接绑定 this.state.user 。
4. 在JSX中，若是绑定 this.state.user.name的话也可能出现问题，上面提到了，setState是异步的，在没有为user赋值的时候user为null。若是此时访问user.name，必然会报错。这里咱们能够经过条件判断来进行渲染
5. 条件渲染的另一种作法就是使用三目运算符