小編精選 - 技術文章翻譯 · 06月24日

讓我們練習在 React 中編寫乾淨、可重複使用的元件

🔑 關鍵概念

什麼是可重複使用的 React 元件？將它們視為建置塊。

它們是您可以在網站的不同部分使用的程式碼片段，以節省時間。它們可以是從簡單按鈕到複雜表單的任何內容。

為什麼要使用可重複使用的元件？

它們可以輕鬆加入新功能並提高程式碼的可擴展性。另外，您可以在未來的專案中使用它們而無需重寫。

🧩 如何寫出乾淨、可重複使用的 React 元件

兩個關鍵點：

1. 避免副作用：不要在元件中直接包含與外部資料互動的邏輯（例如 API 呼叫）。相反，將此邏輯作為props傳遞。

簡單但不可重複使用的按鈕範例：

const Button = () => {
  return (
    <button>Click Me</button>
  );
}

該按鈕缺乏靈活性，因為文字是硬編碼的。

2. 使用 Props： Props 是傳遞給元件以對其進行自訂的參數。

更好的按鈕範例：

const Button = ({ color, label }) => {
  return (
    <button style={{ backgroundColor: color }}>{label}</button>
  );
}

此按鈕可以有不同的顏色和標籤，使其更易於重複使用。

挑戰：

考慮如何在不同情況下使用您的元件，並將其設計得靈活。

🍃 可重複使用 React 元件的範例

1. 按鈕：自訂不同樣式和功能的按鈕。

const Button = ({ color, label, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {label}
    </button>
  );
};

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

2. 導覽列：整個網站的一致導覽。

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
      {isLoggedIn ? <a href="/profile">Profile</a> : <a href="/login">Login</a>}
    </div>
  );
};

// Using the Navbar component
<Navbar isLoggedIn={true} />

3. 為什麼要避免在元件中呼叫 API

在元件中包含 API 呼叫等副作用會降低可重複使用性。將副作用作為 prop 傳遞：

const SaveButton = ({ onClick, label }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

// Using SaveButton
<SaveButton onClick={saveUser} label="Save User" />
<SaveButton onClick={saveProject} label="Save Project" />

在沒有適當可視化的情況下建立元件可能會讓人不知所措。對於設計而言，Figma 是開發人員用來建立網頁設計元件和原型的絕佳工具。它因其簡潔的用戶介面和協作功能而廣受歡迎。您可以在這裡免費註冊。

菲格瑪

👏 結論

恭喜！您已經學習如何建立乾淨、可重複使用的 React 元件。它們是穩健 React 開發的基礎。您練習得越多，您就越能在專案中更好地使用它們。

如果你喜歡這個，請關注我𝕏以獲取更多前端開發技巧。

0個讚 0留言 107瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。