Preact Props 使用

在前端开发中，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

然后在组件中引入并使用它：

// www.javascriptcn.com code example
import PropTypes from "prop-types";

function Profile({ name, age }) {
  return <div>姓名: {name}, 年龄: {age}</div>;
}

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

// 使用组件
<Profile name="Bob" age={25} />;

在这里，我们定义了 Profile 组件的属性验证规则，确保 name 必须是一个字符串，age 必须是一个数字。

动态属性值

除了静态值外，属性还可以接受动态计算的结果。例如，可以根据用户的输入或其他状态动态生成属性值。

// www.javascriptcn.com code example
function ToggleText({ isActive, text }) {
  return (
    <div>
      {isActive ? text : "不活跃"}
    </div>
  );
}

// 使用组件
<ToggleText isActive={true} text="已激活" />;

在这个例子中，ToggleText 组件根据 isActive 属性的值决定显示什么文本内容。

总结

通过本章的学习，我们了解了 Preact 中 Props 的基本概念、属性解构、默认属性值设置、属性验证以及如何处理动态属性值。掌握这些技巧可以帮助你在实际项目中更有效地利用 Props 来构建可复用且易于维护的组件。