第八节：React条件渲染

React 没有Vue那种v-if、v-for的指令的，React的条件渲染和JavaScript中一致，使用js的操作符if或条件运算符（三目表达式）来创建React元素。然后让React根据他们来更新UI。

简单实现

function UserGreeting(props){
    return (<h1>Welcome back!</h1>);
}

function GuestGreeting(props){
    return <h1>Please Sign up!</h1>;
}

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting />
    }else{
        return <GuestGreeting />
    }
} 

export default Greeting;

元素变量

可以使用变量来储存元素。

示例代码:

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    let header;
    if(isLoggedIn){
        header =  (<h1>Welcome back!</h1>);
    }else{
        header = <h1>Please Sign up!</h1>;
    } 
    return <>{header}</>
} 

export default Greeting;

上面主要通过js的if判断做条件渲染。接下来看看在jsx中如何实现；

与运算符 &&

短路与运算符，如果前面条件不成立，则不会进行后面的元素渲染。

示例代码：

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
} 

三目表达式(x?z:y)

因为{}只能显示表达式，所以通过三目表达式控制文本或组件的渲染，是常用的方式

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <L。oginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

防止组件渲染

如果我们需要在一定条件下才去渲染某个组件，可以使用上面的与运算符，但是相对复杂的判断条件或者需要调用组件生命周期方法时，可以在render函数，返回null的方式，来阻止渲染输出

示例代码：

function WarningBanner(props) {
  if (!props.warn) {
    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(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);