[ Day 18 ] 条件 Render - Conditional Rendering

在前面元件以及生命周期的章节中我们提过 render() 这个方法，而且有特别指出它是在 Class Component 所有生命周期当中唯一一个一定要使用的方法（附上传送门）。今天我们就要来介绍如何搭配 JavaScript 的条件式，且依据不同的状况来判断是否渲染元件？

怎麽使用条件 Render

官方文件中提到除了常见的 if...else 语法之外，也可以在 React.js 中的 JSX 搭配以下三个方法来设定渲染的条件：

1. 变数宣告
2. && 运算元
3. 三元运算子

下面我们就大家介绍这三种条件式的运用范例吧！

变数宣告

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')
);

先附上官方 CodePen 给大家看上述范例实作的结果，我们在 render() 这个 Function 中宣告了一个变数 isLoggedIn 并用该变数的布林值来判定画面要渲染的是哪一个 button ？

&& 运算元

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')
);

一样附上官网的 CodePen 先让大家了解范例程序码要呈现的结果，上述范例采用了 && 运算元 的条件，当 && 条件式左边的条件成立（结果为 true ）的话，就会执行右边的内容；反之为不成立（结果为 false ）的话，就不显示任何东西。

三元运算子

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

在 render() 中使用三元运算子，当宣告的 isLoggedIn 变数为 true 时渲染 LogoutButton 这个 Function 。反之该变数为 false 值的话就渲染 LoginButton 。

不想让元件渲染的时候？

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

像是上面官网的范例程序码当中，我们可以发现 WarningBanner 这个 Function Component 的渲染与否取决於传入的 warn 值。如果该 props 的值为 false 时就会回传一个 null 值，这就代表该元件不会执行渲染了。

关於条件渲染的概念，其实都是在 render() 函示里面使用 JavaScript 的条件式或是运算子来搭配完成的。如果你有接触过 Vue.js 的话就更容易理解一些，因为这个概念就等同於我们使用 v-if 做渲染与否的判定一样。

明天就要介绍 React.js 中的表单相关应用！
如果有任何问题都非常非常欢迎提出和指教唷～
那我们下篇见ʘ‿ʘ