React (8) 條件渲染

發表於 更新於 分類於
介紹 React 條件渲染方法

條件渲染

在元件中常需要依照不同情形渲染不同元素，在 jsx 中 可以用 if、&&、? : 等方法實現。

If else

在 jsx 中 可以用 if else 進行條件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
      </ul>
    </section>
  );
}

三元運算式

在 jsx 中，也可以使用三元運算式 ? : 進行條件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
      </ul>
    </section>
  );
}

&& 運算符

另一種條件渲染是使用 && ，當 && 左側為真值時，就渲染右邊內容

1
2
3
4
5
6
return (
  <li className="item">
    {/* isPacked 是 true 時，渲染右邊勾勾 */}
    {name} {isPacked && '✅'}
  </li>
);

要注意 && 左側不能是數字，如果左側為 0，jsx 會直接渲染 0。
想判斷陣列有內容時才渲染時，則可以加上 length > 0 的判斷。

1
2
3
4
5
6
7
8
9
10
return (
  {
    arr.length > 0 && (
      <li className="item">
        {/* isPacked 是 true 時，渲染右邊勾勾 */}
        {name} {isPacked && '✅'}
      </li>
    )
  }
);