我們能夠在不同的條件情境下，讓React自行判斷應該要返回哪些對應的UI畫面

使用if else

已根據使用者是否有都入的情境為例子
先建立兩的Components來當作已登入、未登入的區別

使用if else來判斷使用者是已登入狀態，要返回<UserGreeting />的component
反之未登入狀態則是返回<GuestGreeting />component

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

function GuestGreeting(props) {
  return <h1>請點擊登入</h1>;
}

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

  return <GuestGreeting />;
}

ReactDOM.render(
  <Greeting isLoggedIn={false} />,  // isLoggedIn (true/false) props 用來控制目前是否登入
  document.getElementById('root')
);

**使用三元運算子

先來複習一下三元運算子的語法><
condition ? exprIfTrue : exprIfFalse

condition -> 用來做為條件的表達式
exprIfTrue -> 如果 condition 的值是 true(等於或是可轉換為 true) , 則執行exprIfTrue
exprIfFalse -> 如果 condition 的值是 falsy(等於或是可轉換為 false) , 則執行 exprIfFalse

舉例：

const age = 26;
const beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

回到React
上面的判斷是否是登入/未登入狀態，我們也可以將if else改寫成三元運算子的方式

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

function GuestGreeting(props) {
  return <h1>請點擊登入</h1>;
}

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

ReactDOM.render(
  <Greeting isLoggedIn={false} />, // isLoggedIn (true/false) props 用來控制目前是否登入
  document.getElementById('root')
);