react如何使用props
使用 Props 的基本概念
在 React 中，props（属性）是从父组件传递到子组件的数据。它们是只读的，子组件不能直接修改接收到的 props。
传递 Props
父组件通过类似 HTML 属性的方式将数据传递给子组件。例如：
function ParentComponent() {
return <ChildComponent name="Alice" age={25} />;
}接收 Props
子组件通过函数参数或 this.props（类组件）接收 props。
函数组件示例：
function ChildComponent(props) {
return <div>Name: {props.name}, Age: {props.age}</div>;
}类组件示例：
class ChildComponent extends React.Component {
render() {
return <div>Name: {this.props.name}, Age: {this.props.age}</div>;
}
}解构 Props
为了提高可读性，可以使用解构语法直接提取 props 中的属性：
function ChildComponent({ name, age }) {
return <div>Name: {name}, Age: {age}</div>;
}默认 Props
可以为 props 设置默认值，防止未传递时出现未定义错误：
ChildComponent.defaultProps = {
name: "Guest",
age: 0
};或使用 ES6 默认参数（函数组件）：
function ChildComponent({ name = "Guest", age = 0 }) {
return <div>Name: {name}, Age: {age}</div>;
}传递复杂数据
props 可以传递任意类型的数据，包括对象、数组或函数：
<ChildComponent
user={{ name: "Bob", id: 1 }}
colors={["red", "green"]}
onClick={() => console.log("Clicked")}
/>子组件嵌套
props.children 可以访问组件标签内的内容：
function ParentComponent() {
return <ChildComponent>Hello World!</ChildComponent>;
}
function ChildComponent(props) {
return <div>{props.children}</div>;
}注意事项
props是只读的，子组件不应直接修改它们。- 使用 TypeScript 或 PropTypes 可以为
props添加类型检查，提高代码健壮性。
