条件 Render ( Day 9 )

在 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