React学习：条件渲染

在react中的条件渲染和Vue不一样，react使用的是：使用不同的组件进行封装，然后根据使用的场景再来判断使用哪一个组件

React中的条件渲染和js中的一样，使用js或者其他条件运算符进行不同组件的渲染

1.元素变量

可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

//元素变量
function LoginButton(props) {
    return (
        <button onClick={props.onClick}> 
            Login
        </button>
    )
}
function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    )
}
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;
        if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick}></LogoutButton>
        } else {
            button = <LoginButton onClick = {this.handleLoginClick}></LoginButton>
        }
        return (
            <div>
                <Greeting isLoggedIn = {isLoggedIn} />
                {button}
            </div>
        )
    }
}
ReactDOM.render(<LoginControl />, document.getElementById('root'));

2.运算符&&

通过大括号{}来包裹代码，来判断是否渲染&&后面的代码

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
      <div>
        <h1>Hello!</h1>
        {unreadMessages.length > 0 &&
          <h2>
            You have {unreadMessages.length} unread messages.
          </h2>
        }
      </div>
    );
  }
  const messages = ['React', 'Re: React', 'Re:Re: React'];
//   const messages = [];
ReactDOM.render(  <Mailbox unreadMessages={messages} />, document.getElementById('root'));

之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

3.三元运算符condition？true：false

{condition？（true expression）/true：（false expression）/ false}

此处可以是用表达式或者字符串都可以。如果是较为复杂的表达式，建议使用组件抽离

4.组件的渲染阻止

function WarningBanner(props) {
    if (!props.warn) { // 根据传入参数warn进行判断是否进行渲染，如果不进行渲染的话，return null。
      return null;
    }
  
    return (
      <div className="warning">
        Warning!
      </div>
    );
  }
  
  class Page extends React.Component {
    constructor(props) {
      super(props);
      this.state = {showWarning: true};
      this.handleToggleClick = this.handleToggleClick.bind(this);
    }
  
    handleToggleClick() {
      this.setState(state => ({
        showWarning: !state.showWarning
      }));
    }
  
    render() {
      return (
        <div>
          <WarningBanner warn={this.state.showWarning} />
          <button onClick={this.handleToggleClick}>
            {this.state.showWarning ? 'Hide' : 'Show'}
          </button>
        </div>
      );
    }
  }

在组件的render函数中书写return null 并不会影响组件的生命周期函数的执行，例如上述组件的componentDidUpdate依旧会执行