在前端开发中，Props 是组件间传递数据的重要方式。Preact 中的 Props 使用与 React 类似，但也有其独特的特性和最佳实践。本章将详细介绍如何在 Preact 中使用 Props，包括基础概念、属性解构、默认值设置、属性验证等。
Props 的基本概念
Props 是“Properties”的缩写，是组件接收外部传入数据的主要途径。在 Preact 中，可以通过属性直接传递数据给组件，这些数据可以在组件内部使用。
function Greeting({ name }) {
return <h1>你好, {name}!</h1>;
}
// 使用组件
<Greeting name="Alice" />;在上面的例子中，Greeting 组件通过 props 接收了一个名为 name 的属性，并在渲染时使用了它。
属性解构
为了方便在组件内部使用属性，通常会使用属性解构的方式将属性提取出来。这样可以避免每次访问属性时都需要通过 props 对象来获取。
function Avatar({ src, alt }) {
return <img src={src} alt={alt} />;
}
// 使用组件
<Avatar src="/images/avatar.png" alt="示例头像" />;在上述代码中，Avatar 组件通过属性解构直接获取了 src 和 alt 属性，使得代码更加简洁易读。
默认属性值
当某个属性未被传递时，可以为该属性设置一个默认值。这有助于确保组件在任何情况下都能正常工作。
function Button({ children, primary = false }) {
const className = primary ? "primary-button" : "";
return <button className={className}>{children}</button>;
}
// 使用组件
<Button primary={true}>点击我</Button>
<Button>点击我</Button>在这个例子中，primary 属性的默认值被设置为 false。如果在调用组件时不传递 primary 属性，它将自动采用默认值 false。
属性验证
属性验证可以确保传递给组件的属性符合预期的类型和格式。虽然 Preact 没有内置的属性验证功能，但我们可以借助第三方库如 prop-types 来实现这一功能。
首先需要安装 prop-types 库：
npm install prop-types
然后在组件中引入并使用它：
-- -------------------- ---- ------- ------ --------- ---- ------------- -------- --------- ----- --- -- - ------ -------- ------- --- ------------ - ----------------- - - ----- ---------------------------- ---- --------------------------- -- -- ---- -------- ---------- -------- ---
在这里，我们定义了 Profile 组件的属性验证规则，确保 name 必须是一个字符串，age 必须是一个数字。
动态属性值
除了静态值外，属性还可以接受动态计算的结果。例如，可以根据用户的输入或其他状态动态生成属性值。
-- -------------------- ---- -------
-------- ------------ --------- ---- -- -
------ -
-----
--------- - ---- - ------
------
--
-
-- ----
----------- --------------- ---------- ---在这个例子中，ToggleText 组件根据 isActive 属性的值决定显示什么文本内容。
总结
通过本章的学习，我们了解了 Preact 中 Props 的基本概念、属性解构、默认属性值设置、属性验证以及如何处理动态属性值。掌握这些技巧可以帮助你在实际项目中更有效地利用 Props 来构建可复用且易于维护的组件。