为何传递props会被嵌套进对象？如何实现非嵌套传参？

数据老陈

2026-7-31

React组件Props嵌套问题解答

为什么会出现Props嵌套？

你在父组件中传递参数时写了<PartnerPanel props={partners} />，这相当于给子组件传入了一个键名为props、值为partners数组的属性。React组件的所有传入参数都会被打包成一个单一的对象（也就是子组件函数的props参数），所以你必须通过props.props才能拿到目标数组——这是你自己把数组放在了props这个键下面导致的嵌套。

如何避免Props嵌套？

有两种常用方式可以直接获取目标数据，不用嵌套访问：

方式1：使用语义化的属性名传递

给传入的属性起一个更清晰的名字（比如partners），而非用props作为键：

父组件代码修改：

const Partners: NextPage = () => {
  return (
    <>
      <PartnerPanel partners={partners} />
    </>
  );
};

子组件类型定义与代码修改：

// 类型定义直接对应属性名
type PropsType = {
  partners: { name: string }[];
};

export const PartnerPanel: FC<PropsType> = (props): JSX.Element => {
  // 直接通过props.partners访问数组
  return <div>{props.partners[0].name}</div>;
};

方式2：解构子组件的Props参数

如果不想每次都写props.xxx，可以在子组件中直接解构出需要的属性，让代码更简洁：

type PropsType = {
  partners: { name: string }[];
};

// 直接解构partners属性
export const PartnerPanel: FC<PropsType> = ({ partners }): JSX.Element => {
  return <div>{partners[0].name}</div>;
};