React中如何在单个Prop中传递多个值并提取？

开发者阿泽

2026-4-29

当然可以实现！你猜的思路完全正确——把关联的valueA和valueB封装成对象或者数组，就能通过单个prop传递了。下面给你两种常用的实现方式，附带完整代码示例：

方式1：封装为对象（推荐，可读性更强）

这种方式适合需要明确标识每个值的场景，父组件里把两个值打包成带键名的对象，子组件里通过解构或者直接访问对象属性来提取值。

父组件传递代码：

<div>
  <MyComponent 
    valueAB={{ a: 100, b: 90 }} 
    valueC={80} 
    valueD={70} 
    valueE={60} 
  />
</div>

子组件接收代码（函数组件为例）：

function MyComponent({ valueAB, valueC, valueD, valueE }) {
  // 解构对象里的两个值，也可以直接用valueAB.a、valueAB.b访问
  const { a: valueA, b: valueB } = valueAB;

  // 之后就可以像原来一样使用valueA、valueB、valueC等变量了
  return (
    <div>
      <p>ValueA: {valueA}</p>
      <p>ValueB: {valueB}</p>
      <p>ValueC: {valueC}</p>
    </div>
  );
}

方式2：封装为数组

如果这两个值的顺序是固定的，不需要额外键名标识，也可以用数组来传递：

父组件传递代码：

<div>
  <MyComponent 
    valueAB={[100, 90]} 
    valueC={80} 
    valueD={70} 
    valueE={60} 
  />
</div>

子组件接收代码：

function MyComponent({ valueAB, valueC, valueD, valueE }) {
  // 按数组顺序解构值，顺序要和传递时一致
  const [valueA, valueB] = valueAB;

  return (
    <div>
      <p>ValueA: {valueA}</p>
      <p>ValueB: {valueB}</p>
      <p>ValueC: {valueC}</p>
    </div>
  );
}