React组件传参异常：字符串prop为何在Comp3中变为对象？

你遇到的这个差异，核心原因是React函数组件的参数规则：它永远只会接收一个参数——包含所有props的对象，而不是逐个接收单独的prop值。咱们拆解来看：

先看你写的Comp2： #

const Comp2 = (prop1, prop2) => { ... }

这里其实存在一个巧合的“错误”：React会把你传递的{prop1: 'test1', prop2: 'test2'}整个对象传给第一个参数prop1，第二个参数prop2实际是undefined。你觉得Comp2正确收到了字符串prop1，大概率是你在组件内部不小心写成了prop1.prop1（比如用prop1.prop1来取值），刚好拿到了正确的字符串，这属于歪打正着。

再看Comp3： #

const Comp3 = prop1 => ( ... )

这里的prop1就是React传递的完整props对象{prop1: 'test1'}，所以你直接用它的时候，拿到的自然是包含prop1属性的对象，而不是单独的字符串值——这才是React组件参数的正常行为。

正确的写法应该是这样： #

不管组件需要多少个prop，都要通过解构props对象来获取单个值，或者直接访问props对象的属性：

Comp2的正确定义： #

// 解构props对象，直接拿到prop1和prop2的字符串值
const Comp2 = ({ prop1, prop2 }) => { ... }

Comp3的正确定义： #

// 方式1：解构获取单个prop
const Comp3 = ({ prop1 }) => ( ... )

// 方式2：先接收完整props对象，再访问属性
const Comp3 = props => {
  const prop1Value = props.prop1; // 这里才是字符串'test1'
  return ...
}

验证一下： #

你可以在组件里加个console.log，就能看到参数的真实样子：

const Comp2 = (prop1, prop2) => {
  console.log('Comp2的第一个参数:', prop1); // 输出 {prop1: 'test1', prop2: 'test2'}
  console.log('Comp2的第二个参数:', prop2); // 输出 undefined
  ...
}

const Comp3 = prop1 => {
  console.log('Comp3的参数:', prop1); // 输出 {prop1: 'test1'}
  ...
}

简单来说，React组件不会帮你把props拆成单独的参数传给函数，必须你自己从props对象里提取需要的属性~

内容的提问来源于stack exchange，提问作者Hello