深入了解 React 函数式组件的 Props
React 是一种用于构建用户界面的JavaScript库，而函数式组件是 React 中的一种核心概念。在本文中，我们将探讨如何使用函数式组件和 Props（属性）来创建可重用的 UI 组件。让我们以一个简单的例子开始，该例子展示了如何在 React 中使用函数式组件和 Props。
介绍
React 中的函数式组件是一种声明式的方式来定义 UI，通过接收 Props 来渲染 UI。在示例中，我们有一个名为 Person 的函数式组件，它接收一些属性（name、age、sex、speak）并以列表的形式呈现这些属性。
function Person(props) {
const { name, age, sex, speak } = props;
return (
<ul onClick={() => speak(name)}>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
);
}
函数式组件中的 Props
在函数式组件中，Props 是传递给组件的数据，它们作为组件的参数。在 Person 组件中，我们使用了解构赋值来提取传递进来的属性，然后使用这些属性渲染 UI。
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.oneOf(['男', '女']),
speak: PropTypes.func,
}
Person.defaultProps = {
age: 0,
sex: '不男不女',
speak: () => {},
};
通过使用 PropTypes，我们可以为组件的属性定义类型，并使用 defaultProps 设置默认值。这有助于提高代码的可读性和组件的健壮性。
在 Main 组件中使用 Person
在 Main 类组件中，我们定义了一个 speak 函数，并创建了一个包含不同人物信息的数组。通过使用 map 函数，我们遍历数组并为每个人物创建一个 Person 组件实例，将其属性传递给组件。
const persons = [
{ name: 'Judith', age: 18, sex: '女', speak },
{ name: 'ZhangSan', sex: '男', speak },
];
return (
<>
{persons.map((person, index) => <Person {...person} key={index} />)}
</>
);
通过这种方式，我们可以在 Main 组件中轻松地重用 Person 组件，并通过 Props 自定义每个人物的信息。
结语
React 函数式组件和 Props 提供了一种清晰、模块化的方式来构建可维护的用户界面。通过合理使用 Props，我们能够轻松传递数据和行为，使组件更具可复用性和可扩展性。希望本文帮助你更深入了解 React 函数式组件的 Props 概念，以及如何有效地利用它们构建强大的用户界面。
