当前位置：首页 > React

react如何传props

2026-01-23 17:20:36React

在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中的特定属性，使代码更简洁。

react如何传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，避免逐个属性传递。

react如何传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类型错误导致的问题。