react如何传props
在React中传递props是组件间通信的核心方式，主要通过以下方法实现：
父组件向子组件传递props
父组件通过在子组件标签上添加属性来传递数据。子组件通过props参数接收这些数据。
// 父组件
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent greeting={message} />;
}
// 子组件
function ChildComponent(props) {
return <div>{props.greeting}</div>;
}使用解构赋值简化props接收
子组件可以通过解构赋值直接获取props中的特定属性，使代码更简洁。
function ChildComponent({ greeting }) {
return <div>{greeting}</div>;
}传递函数作为props
父组件可以将函数传递给子组件，实现子组件向父组件通信。
// 父组件
function ParentComponent() {
const handleClick = () => console.log("Button clicked");
return <ChildComponent onClick={handleClick} />;
}
// 子组件
function ChildComponent({ onClick }) {
return <button onClick={onClick}>Click Me</button>;
}批量传递props
使用展开运算符可以一次性传递多个props，避免逐个属性传递。
const props = { name: "Alice", age: 25 };
return <ChildComponent {...props} />;默认props值
通过defaultProps为组件定义默认属性值，防止未传递props时出错。
ChildComponent.defaultProps = {
greeting: "Default Greeting"
};类型检查（TypeScript/PropTypes）
使用TypeScript或PropTypes对props进行类型检查，提高代码健壮性。
// PropTypes示例
ChildComponent.propTypes = {
greeting: PropTypes.string.isRequired
};
// TypeScript示例
interface ChildProps {
greeting: string;
}
function ChildComponent({ greeting }: ChildProps) { ... }Context跨层级传递
对于深层嵌套组件，可使用Context避免props逐层传递。
const MyContext = React.createContext();
function Parent() {
return (
<MyContext.Provider value="Shared Data">
<GrandchildComponent />
</MyContext.Provider>
);
}
function GrandchildComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}每种方法适用于不同场景：简单父子通信直接用props，复杂应用可结合Context或状态管理工具。TypeScript或PropTypes能有效减少因props类型错误导致的问题。
