【React 新手村】如何優雅地控制頁面組件

原文發表於 Medium。

故事發生在一個前端工程師小明的日常工作中。小明正在開發一個電子商務網站，他的任務是在商品列表頁面中顯示每個商品的價格，但問題是，除了商品價格會浮動之外，有時還會碰到商品未定價的問題，那該如何解決呢？

小明的初步想法

小明的每個商品組件如下所示：

import React from 'react';

const ProductCard = ({ product }) => {  
  return (  
    <div className="product-card">  
      <h3>{product.name}</h3>  
      <p>{/* 小明需要在這裡顯示商品價格 */}</p>  
      <button>加入購物車</button>  
    </div>  
  );  
};  
  
export default ProductCard;

他想要在 <p> 標籤中顯示商品的價格，但價格卻有可能是空值，這個空值若出現在頁面上，小則頁面崩潰，大則造成顧客的誤會，因此小明需要一個方式來處理這種情況。

使用兩種渲染方案

小明在第一時間想要這樣安排他的渲染模式：

import React from 'react';

const ProductCard = ({ product }) => {  
  
  if(product.price){  
  return (  
    <div className="product-card">  
      <h3>{product.name}</h3>  
      <p>{product.price}</p>  
      <button>加入購物車</button>  
    </div>  
    )  
  }   
  else if (!product.price){  
  <div className="product-card">  
      <h3>{product.name}</h3>  
      <p>暫時無法取得商品價格</p>  
      <button>加入購物車</button>  
    </div>  
}   
};  
  
export default ProductCard;

這樣的處理方式很棒，但其實還可以更好。尤其是看到有好多重複的程式碼，這或許是我們可以避免的重複工。

使用三元運算子：

為了更加簡潔的程式碼，小明最終決定使用三元運算子，如此一來就可以根據價格是否存在，分別顯示不同的內容：

import React from 'react';

const ProductCard = ({ product }) => {  
  return (  
    <div className="product-card">  
      <h3>{product.name}</h3>  
      {/* 使用三元運算子處理商品價格顯示 */}  
      <p>{product.price ? `$${product.price}` : '暫時無法取得商品價格'}</p>  
      <button>加入購物車</button>  
    </div>  
  );  
};  
  
export default ProductCard;

這邊的邏輯就變成：當商品價格存在時，顯示 $ 加上價格；當價格不存在時，顯示 『暫時無法取得商品價格』。如此一來是不是就簡潔得多了呢？

使用三元運算子的好處可以歸結為下列兩類：

1. 條件渲染：三元運算子允許小明更加優雅地根據條件顯示不同的內容，尤其是在處理可能為空的數據時非常有用。

2. 簡潔：使用三元運算子的代碼相對簡潔，能夠在一行中處理條件判斷，而不需要撰寫完整的 if-else 敘述。

這次事件讓小明更好地理解了三元運算子在 React 中的應用，他發現它是一個簡單而強大的工具，能夠有效處理 UI 中的條件邏輯，簡潔又不喪失程式碼的可讀性。

Bonus: 更常使用的運用案例

三元運算子在React的運用上不僅僅是字串的顯示，它甚至可以操控組件的出現與否：

import React from 'react';
import LoginPage from "./components/LoginPage.jsx"
import SignupPage from "./components/Signup.jsx"

const App = () => {  
  const [isSignup, setIsSignup] = useState(false)  
  return (  
    <div className="Main">  
         {/*若狀態isSignup為true則渲染<LoginPage/>，反之則為<SignupPage/>*/}  
        { isSignup ? <LoginPage/> : <SignupPage/> }  
    </div>  
  );  
};  
  
export default App;

如上方程式碼的操作方式，在很多React App中大量使用，舉凡換頁、選項設定頁面等等皆可以參照這樣的方式，可以說是非常好用。（以下我夢到的：其他框架的使用者，例如Vue，非常不喜歡這個使用三元運算子來控制組件渲染的手法，但我超愛！）

最後祝大家天天有coding，天天有成長。我是一個半路出家卻把coding當作興趣，且不斷鑽研技巧的開發者，希望有朝一日能成為全然獨當一面的技術大神。