在React的世界里，Props是组件间传递数据的一种方式，它们类似于HTML属性，但更加强大，因为你可以通过它们传递任何JavaScript值，包括对象、数组和函数。本文将基于React官方文档中的知识点，探讨如何向组件传递Props，如何从组件读取Props，以及如何为Props指定默认值，并提供示例代码和注意事项。
向组件传递Props
当你需要向子组件传递信息时，你可以在父组件中通过Props来实现。
技巧：
- 直接在JSX标签中添加属性，将数据作为Props传递给子组件。
示例：
function Profile() {
return (
<Avatar
person={{ name: '辰火流光', imageId: '1bX5QH6' }}
size={100}
/>
);
}
注意事项：
- 当传递对象作为Prop时，使用双大括号
{{}}。
在子组件中读取Props
子组件可以通过参数列表中的Props来访问传递给它的数据。
技巧：
- 使用解构赋值来直接获取Props中的值。
示例：
function Avatar({ person, size }) {
// 在这里 person 和 size 是可访问的
}
注意事项：
- 在函数参数中使用解构赋值时，不要忘记花括号
{}。
为Props指定默认值
你可以为Props指定默认值，以便在没有提供值时使用。
技巧：
- 在组件的参数列表中使用等号
=来指定默认值。
示例：
function Avatar({ person, size = 100 }) {
// 如果没有提供size，它将默认为100
}
注意事项：
- 默认值只在Prop未传递或传递为
undefined时生效。
使用JSX展开语法传递Props（谨慎使用）
当你需要将所有Props一次性传递给子组件时，可以使用展开语法。
技巧：
- 使用
{...props}来一次性传递父组件的Props。
示例：
// 父组件
function Profile() {
const props = { name: '辰火流光', imageId: '1bX5QH6' }
return (
<div className="card">
<Avatar {...props} />
</div>
);
}
// 子组件
function Avatar({ name, imageId }) {
// 在这里 name 和 imageId 是可访问的
}
注意事项：
- 请谨慎使用展开语法，以避免不必要的Props传递和潜在的性能问题。
记住，子组件接收的Props是只读的，它们不应该被子组件修改。当需要响应用户输入或其他交互时，应该使用状态（State）来管理这些变化，关于State，今后的章节中会讲到。
