React入门-5.条件渲染

2019年9月20日 135次阅读 来源: 李春雨

条件渲染

条件渲染非常简单，在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. 条件渲染的另外一种做法就是使用三目运算符

《React入门-5.条件渲染》

    原文作者：李春雨
    原文地址: https://segmentfault.com/a/1190000017208598
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞