在 React 中，你可以建立不同的 component 來封裝你需要的行為。接著，你可以根據你的應用程式的 state，來 render 其中的一部份。

在 JSX 裡面寫條件式的兩種方法：

• 使用 &&, ||
• 三元運算式 ?:

利用不同條件去繪製 render 不同的 element 或元件 component，要注意的事情如列：

• falsy expression 仍會回傳 falsy expression
• 防止 Component Render // return null 就不會渲染這個 component

以下舉例

一般使用 &&, ||

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>
        { unreadMessages[0] }{ unreadMessages.length > 1 &&
          (<span>...more({unreadMessages.length - 1})</span>)
        }          
      </h1>
    </div>
  );
}


const list = ['你好', 'Hi', '最近如何'];
ReactDOM.render(
  <Mailbox unreadMessages={list} />,
  document.getElementById('root')
);

注意 falsy expression 仍會回傳 falsy expression

0 && 'aaa'
//0 => template 顯示 0

"0" && 'aaa'
//'aaa' => template 顯示 'aaa'

!!0 && 'aaa'
false => template 即不會顯示

!!"0" && 'aaa'
//'aaa' => template 顯示 'aaa'

防止 Component Render 使用 return null

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <h1>Warning!!!</h1>
}

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>
       <button onClick={this.handleToggleClick}>
          { this.state.showWarning ? 'Hide' : 'Show'}
       </button>
        <WarningBanner warn={this.state.showWarning} />
      </div>
    );
  }
}

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

以上今天

參考資料：
https://zh-hant.reactjs.org/docs/conditional-rendering.html