ReactJS - 嵌套组件：初学者指南

你好，未来的React法师们！今天，我们将踏上一段激动人心的旅程，探索ReactJS中的嵌套组件世界。如果你是编程新手，不用担心——我将作为你的友好向导，一步一步地解释所有内容。在本教程结束时，你将能够像专业人士一样嵌套组件！

什么是嵌套组件？

在我们深入之前，让我们先了解什么是嵌套组件。想象你正在建造一栋房子（你的React应用）。墙壁、屋顶和地基是你的主要组件。但在房子内部，你有房间（嵌套组件），其中可以包含家具（更多嵌套组件）。这种结构使我们能够以可管理的方式创建复杂的用户界面。

为什么使用嵌套组件？

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">星期一，十二月二十五日，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