Day 元件和 Props - ReactJS

歡迎來到「ReactJS 30 天」挑戰的第四天！今天，我們將探索元件和道具——任何 React 應用程式的構建塊。了解這些概念將使您能夠將 UI 分解為可重複使用的獨立部分。

什麼是組件？

React 中的元件就像食譜中的成分。就像您組合不同的成分來製作菜餚一樣，您也可以組合組件來建立 React 應用程式。元件是一個 JavaScript 函數或類，可以選擇接受輸入（稱為 props）並傳回一個描述畫面上應顯示內容的 React 元素。

React 中有兩種主要類型的元件：

函數元件：這些是傳回 JSX 的 JavaScript 函數。它們更簡單、更容易閱讀。

類別元件： 這些是從 React.Component 擴充的 ES6 類別。它們具有更多功能，例如狀態和生命週期方法，但在現代 React 開發中不太常見。

範例：按鈕組件

讓我們建立一個簡單的按鈕元件：

function Button() {
  return (
    <button>Click me!</button>
  );
}

這個 Button 元件是一個功能元件，它傳回一個帶有文字「Click me!」的按鈕元素。

為什麼組件很重要

元件可讓您將 UI 分解為更小的、可管理的部分。這使您的程式碼更有組織性並且更易於維護。想像一下嘗試烹飪一道複雜的菜餚而不將其分解為多個步驟。那就太混亂了！同樣，建立沒有元件的 UI 可能會變得難以承受。

現實生活中的例子：樂高積木
想想看樂高積木這樣的組件。每個區塊（組件）都是應用程式的一部分，您可以將它們組合起來創建更大的東西。就像樂高積木一樣，組件可以在應用程式的不同部分中重複使用。

什麼是道具？
Props（「屬性」的縮寫）是將資料從一個元件傳遞到另一個元件的方式。它們與函數參數類似，可用於自訂元件。

例如，假設我們要建立一個 Button 元件，它可以根據收到的 props 顯示不同的文字：

function Button(props) {
  return (
    <button>{props.label}</button>
  );
}

現在，當您使用 Button 元件時，您可以傳入 label 屬性來自訂其文字：

function App() {
  return (
    <div>
      <button label="Submit"></button>
      <button label="Cancel"></button>
    </div>
  );
}

這裡，Button 元件使用了兩次，但具有不同的標籤：「提交」和「取消」。

道具的重要性

Props 讓你的元件更有彈性和可重複使用。您可以透過 props 傳入動態數據，而不是在元件內硬編碼值，從而允許您在不同的上下文中使用相同的元件。

使用 Vite 設定組件和道具

由於我們使用 Vite 作為開發環境，因此設定元件和 props 非常簡單。如果您一直在操作，那麼您的 Vite 專案已經配置完畢。您可以開始在單獨的檔案中建立元件並將它們匯入到您的主應用程式中。

以下是建構專案的方法：

1。建立新元件： 在 src 資料夾中建立一個新檔案 Button.jsx，並在其中定義您的 Button 元件。
2.在您的應用程式中使用該元件： 在您的 App.jsx 檔案中，匯入 Button 元件並將其與不同的 props 一起使用。

把它們放在一起

元件和 props 是 React 基於元件的架構的核心。透過將 UI 分解為更小的元件並使用 props 在它們之間傳遞數據，您可以建立可擴展且可維護的應用程式。

明天，我們將深入研究狀態和生命週期方法，這將使您的元件能夠管理動態資料並回應隨時間變化的變化。

以上是Day 元件和 Props - ReactJS的詳細內容。更多資訊請關注PHP中文網其他相關文章！