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. 條件渲染的另一種作法就是使用三目運算符