react条件渲染

条件渲染

• 元素变量

声明一个变量，用if判断该变量需要赋值的组件

 let button = null;    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }

• 行内逻辑与

利用逻辑与简化if判断

function Mailbox(props) {  const unreadMessages = props.unreadMessages;  return (    <div>      <h1>Hello!</h1>      // 判断数组长度，是否渲染h2      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>  );}const messages = ['React', 'Re: React', 'Re:Re: React'];ReactDOM.render(  <Mailbox unreadMessages={messages} />,  document.getElementById('root'));

• 三元运算符

简单的三元运算符

render() {  const isLoggedIn = this.state.isLoggedIn;  return (    <div>      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>  );}

渲染组件的三元运算

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

• 阻止组件渲染

在一些情况下，你可能想隐藏本组件，即使他是被其他组件渲染出的，

解决办法：return null,并且不会影响组件的生命周期

function WarningBanner(props) {  if (!props.warn) {    return null;  }  return (    <div className="warning">      Warning!    </div>  );}

本章示例

声明登录/登出两个组件。控制点击事件改变state.isLoggedIn，相应的改变元素变量的赋值

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