記得第一天的say hello範例中有提到，render就是蓋房子。render他可以像JavaScript一樣使用條件式if或是三元運算，讓Dom在條件之下進行更新。

運用if條件判斷做畫面切換

如官方範例來說，登入者狀態會有不同的元件顯示

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

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

新增一個Greeting元件裡面加入一個判斷式，如果外層props進來的是false就會顯示<GuestGreeting />，若改為true則顯示<UserGreeting />。

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

const root = ReactDOM.createRoot(document.getElementById('root'));
// 試改為 isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

運用條件運算子做元件切換

可以利用條件（三元）運算子切換元件，JavaScript 的三元運算子 [condition ? true : false](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
。Loading頁面就可以這樣使用，當 loading 為true時，顯示Loading元件，false則為 Home 元件。

{
  loading? <Loading /> : <Home />}
}

隱藏元件

這裡也使用官方文件當範例。

建立一個警示橫幅WarningBanner元件，若props.warn為false則return null隱藏元件，若為true則顯示。

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

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

點擊按鈕Hide按鈕觸發handleToggleClick，showWarning從true變成false，button中的文字改為show，且WarningBanner元件條件判斷return null，把它隱藏起來。

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }
  
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);