[譯]React核心概念6：條件渲染

原文連接：reactjs.org/docs/condit…

引言

在React中你能夠建立封裝有不一樣行爲的組件，而且根據應用的狀態渲染其中的某些組件。

React中的條件渲染與JavaScript一致。使用JavaScript運算符（如if或條件運算符）來建立表明當前狀態的元素，以後讓React更新UI以匹配它們。

咱們來看下面兩個組件：

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

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
複製代碼

如今咱們來建立一個Greeting組件來根據用戶是否已經登陸展示上面兩個組件之一。

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

ReactDOM.render(
  // 嘗試改變 isLoggedIn={true}看看有上面變化:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);
複製代碼

上面的例子根據isLoggedIn的值渲染了與之對應的結果。

元素變量

咱們可使用變量來存儲元素，這能夠幫助咱們有條件地渲染組件中的某一部分而不改動其餘的部分。

讓咱們來看看下面表明登陸和登出按鈕的兩個組件：

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
複製代碼

在下面的例子中咱們將會建立一個有狀態組件LoginControl。

它將會根據當前的狀態選擇渲染<LoginButton/>仍是<LogoutButton/>,同時也會渲染咱們以前編寫的<Greeting/>。

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} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);
複製代碼

儘管聲明變量和使用if表達式來渲染組件是一個很好的方法，但有時候咱們會想要一種更加簡單的語法來操做，接下來咱們將介紹幾種在JSX中使用的內聯條件渲染方法。

邏輯&&

你可使用花括號在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>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);
複製代碼

上面的代碼時有效的。在JavaScript中true&&表達式等價於表達式，false&&表達式等價於false。

所以，若是條件爲真，那麼在&&以後的元素就會被渲染，若是爲假，那麼React就會跳過它。

三目運算符

另外一種內聯條件渲染元素的方法是使用JavaScript的三目運算符condition?true:false。

在下面的例子中咱們將會使用三目運算符來有條件地渲染一段文字：

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>
  );
}
複製代碼

固然，這取決於你和你的團隊來選擇哪一種方式可以使得代碼的可閱讀性更高。不過須要記住一點，那就是當條件渲染變得很是複雜時，就能夠把他們提取出來變成組件。

阻止組件渲染

在某些狀況下，你可能想要隱藏某個組件，即便它已經被其餘組件渲染出來了。爲了讓組件隱藏，你能夠在render()方法中返回null而不是讓元素被輸出渲染。

在下面的例子中，<WarningBanner />根據prop warn的值來進行條件渲染。若是warn的值是false，那麼這個組件就不會被渲染。

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(state => ({
      showWarning: !state.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')
);
複製代碼

在render()方法中返回null並不影響組件生命週期的運行。