当前位置：首页 > React

react如何传props

2026-02-11 21:20:58React

传递 props 的基本方式

在父组件中通过属性名直接传递数据，子组件通过 props 对象接收。父组件传递时属性名即为子组件接收时的键名。

// 父组件
<ChildComponent title="Hello" count={42} />

// 子组件
function ChildComponent(props) {
  return <div>{props.title} - {props.count}</div>;
}

解构 props 接收

子组件可以通过解构赋值直接从 props 中提取特定属性，使代码更简洁。

function ChildComponent({ title, count }) {
  return <div>{title} - {count}</div>;
}

传递动态数据

父组件可以将状态（state）或其他变量作为 props 传递给子组件，实现动态数据传递。

// 父组件
function ParentComponent() {
  const [value, setValue] = useState(0);
  return <ChildComponent data={value} />;
}

// 子组件
function ChildComponent({ data }) {
  return <div>Data: {data}</div>;
}

传递函数作为 props

父组件可以将函数传递给子组件，子组件通过调用该函数实现与父组件的通信。

// 父组件
function ParentComponent() {
  const handleClick = () => console.log("Clicked");
  return <ChildComponent onClick={handleClick} />;
}

// 子组件
function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

传递子元素（children）

通过 props.children 可以传递组件标签之间的内容，适用于包裹型组件。

// 父组件
<ChildComponent>
  <span>This is children content</span>
</ChildComponent>

// 子组件
function ChildComponent({ children }) {
  return <div>{children}</div>;
}

批量传递 props

使用展开运算符可以批量传递 props，适用于需要透传大量属性的场景。

// 父组件
const props = { a: 1, b: 2, c: 3 };
<ChildComponent {...props} />

// 子组件
function ChildComponent(props) {
  return <div>{props.a} {props.b} {props.c}</div>;
}

默认 props 值

通过 defaultProps 可以为组件定义默认属性值，当父组件未传递对应 prop 时使用默认值。

function ChildComponent({ name }) {
  return <div>Hello, {name}</div>;
}

ChildComponent.defaultProps = {
  name: "Guest"
};

TypeScript 类型检查

在 TypeScript 中可以通过接口定义 props 的类型，实现静态类型检查。

react如何传props

interface ChildProps {
  name: string;
  age?: number;
}

function ChildComponent({ name, age = 18 }: ChildProps) {
  return <div>{name} is {age} years old</div>;
}