Props 簡介

3 分鐘

React 元件是設計為可重複使用的單位。為了能夠重複使用，元件可讓您透過屬性或 props 來將資料傳入到其中。

props 是唯讀值，可供元件的單一實例使用。您可以用程式設計方式或使用您在設定 HTML 元素的屬性時所使用的相同語法，來定這些屬性。與一般 HTML 不同的是，props 不限於字串或基本值，它們可以是複雜的物件或陣列。 props 可用來作為元件內部的 this 屬性。 props 可以包含您元件所需的多個屬性，而且能夠儲存物件或任何其他資料類型。

案例

為了讓元件可重複使用，您通常會傳遞要顯示為 props 的資料。在這裡，您將建立名為 RecipeTitle 的元件來顯示食譜的標題，並以屬性的形式傳入。

建立元件

在 Visual Studio Code 中，開啟 starter 資料夾，如概觀中醒目提示的內容。
在 Visual Studio Code 中，開啟 src/RecipeTitle.jsx。

在 // TODO: Create RecipeTitle component 行下方，新增下列程式碼：

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
        </section>
    )
};

export default RecipeTitle;

探索程式碼

RecipeTitle 看起來類似於基本的 React 元件，有兩個重要的更新。

首先，它接受名為 props 的參數。使用時，這將會自動包含所有傳入到元件的屬性 (Attribute) 或屬性 (Property)。

其次，您能夠使用 props 中包含的值，就像使用任何一般參數一樣。您正在尋找一個名為 title 的值，而您會在 h2 元素中顯示它。

使用元件

現在，讓我們更新 App.jsx，以將新的 RecipeTitle 元件與 title 屬性搭配使用。

開啟 App.jsx
在顯示 TODO: Add import for RecipeTitle 的行下方，新增下列程式碼，以匯入新建立的 RecipeTitle 元件：
```
// TODO: Add import for RecipeTitle
import RecipeTitle from './RecipeTitle'
```

在顯示 TODO: Add recipe object 的行下方，新增下列程式碼，以建立我們的食譜物件：

// TODO: Add recipe object
const recipe = {
    title: 'Mashed potatoes',
    feedback: {
        rating: 4.8,
        reviews: 20
    },
    ingredients: [
        { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
        { name: '4 Tbsp butter', prepared: false },
        { name: '1/8 cup heavy cream', prepared: false },
        { name: 'Salt', prepared: true },
        { name: 'Pepper', prepared: true },
    ],
};

注意

在此課程模組的練習課程中，您將使用整個 recipe 物件。現在，您的重點在於 title。

在顯示 TODO: Add RecipeTitle component 的行下方，新增下列程式碼：

{/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />

探索程式碼

首先，建立物件來代表您想要顯示的食譜，並在其中新增 title 屬性。然後，以您使用 HTML 元素或任何其他 React 元件的相同方式來使用 RecipeTitle 元件。主要差異在於，您會將 title 屬性設定為 recipe.title 的值。使用 Handlebars ({ })，就能動態地讀取值。

注意

如果您想要用來做為 title 的值為字串常值，您可以使用語法來設定屬性 title='Recipe title。

顯示此頁面

儲存所有檔案。
回到您的瀏覽器並重新整理頁面。您現在會看到頁面上顯示「馬鈴薯泥」的標題。

繼續

Props 簡介

案例

建立元件

探索程式碼

使用 元件

探索程式碼

顯示此頁面

意見反應

使用元件