ReactJS - 嵌套組件：初學者的指南

你好，未來的React魔法師！今天，我們將踏上一段令人興奮的旅程，探索ReactJS中的嵌套組件世界。別擔心如果你是編程新手——我將成為你的友好指南，一步一步地解釋一切。在本教程結束時，你將能像專家一樣嵌套組件！

甚麼是嵌套組件？

在我們深入之前，讓我們了解一下嵌套組件是什麼。想像你正在建造一個房子（你的React應用）。牆壁、屋頂和基礎是你的主要組件。但在房子裡，你有房間（嵌套組件），它們可以包含家具（更多嵌套組件）。這種結構讓我們能以可管理的方式創建複雜的UI。

為何使用嵌套組件？

1. 可重用性：創建一次組件，多次使用。
2. 可維護性：更容易更新和管理較小、專注的組件。
3. 可讀性：你的代碼會變得更有組織，更容易理解。

現在，讓我們動手寫一些代碼吧！

創建我們的第一個嵌套組件

我們從一個簡單的例子開始。想像我們正在建造一個購物應用。我們將創建一個Product組件，它將包含一個Price組件。

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

在這個例子中，Product是我們的父組件，而Price則嵌套在其中。讓我們分解一下：

1. 我們將Price組件導入到Product中。
2. Product組件接收name和price作為props。
3. 我們在Product中使用Price組件，將price prop作為amount傳遞。

現在，當我們使用Product組件時：

<Product name="超級酷炫小工具" price={19.99} />

它將渲染：

<div class="product">
<h2>超級酷炫小工具</h2>
<p class="price">$19.99</p>
</div>

這不是很棒嗎？我們創建了一個可重用的價格顯示，可以在任何產品中使用！

FormattedMoney組件

現在，讓我們創建一個更先進的嵌套組件來格式化金額。這對於以不同貨幣顯示價格非常有用。

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (更新)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

讓我們分解一下FormattedMoney中發生的事情：

1. 我們使用Intl.NumberFormat API來格式化我們的數字為貨幣。
2. 我們使用參數默認值設置默認貨幣為'USD'。
3. 組件返回一個帶有格式化數字的span。

現在，我們可以使用我們的Product組件如下：

<Product name="令人驚奇的萬用插座" price={29.99} currency="EUR" />

這將渲染：

<div class="product">
<h2>令人驚奇的萬用插座</h2>
<span class="formatted-money">€29.99</span>
</div>

酷炫吧？我們創建了一個靈活、可重用的組件，用於以不同貨幣顯示價格！

FormattedDate組件

讓我們創建另一個嵌套組件來顯示格式化的日期。這可以對顯示產品發布日期或促銷結束日期非常有用。

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (再次更新)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>發布日期: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

在這個FormattedDate組件中：

1. 我們創建了兩種格式選項：'short'和'long'。
2. 我們使用Intl.DateTimeFormat根據選擇的格式格式化日期。
3. 我們將輸入的日期字符串解析為Date對象。

現在，我們可以使用我們更新的Product組件如下：

<Product
name="未來小工具"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

這將渲染：

<div class="product">
<h2>未來小工具</h2>
<span class="formatted-money">$99.99</span>
<p>發布日期: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

準備好一切

讓我們創建一個ProductList組件，使用我們所有的嵌套組件：

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

現在，我們可以使用我們的ProductList如下：

const products = [
{ id: 1, name: "超級小工具", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "萬用插座", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "令人驚奇的小工具", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

這將渲染一個產品列表，每個產品都有格式化的價格和日期！

結論

恭喜你！你剛剛學會了React中的嵌套組件。我們創建了用於格式化金額和日期的可重用組件，並將它們嵌套在產品組件中。這只是開始——嵌套組件的可能性無限！

記住，熟能生巧。試著創建你自己的嵌套組件，看看它們如何讓你的React應用變得更加模塊化和可維護。

快樂編程，未來的React大師！?

組件	目的	Props
FormattedMoney	顯示格式化的貨幣	amount, currency
FormattedDate	顯示格式化的日期	date, format
Product	顯示產品信息	name, price, currency, releaseDate
ProductList	顯示產品列表	products (數組)

Credits: Image by storyset