React递归组件传递props时单独传参失效、展开语法生效的原因是什么？

核心本质：两种传参方式生成的props结构完全不同 #

React组件接收的第一个参数永远是所有传入属性组成的集合对象，两种写法传入后组件拿到的props结构有本质区别：

• 第一种写法 <RecursiveComponent itemProps={data} />
  此时组件拿到的props（你代码中命名的itemsProp）结构为：

  {
    itemProps: {
      name: 'Level 1',
      children: [/* 嵌套数据 */]
    }
  }
  

  你代码中直接访问itemsProp.name、itemsProp.children是取不到对应值的，对应值实际存放在itemsProp.itemProps.name、itemsProp.itemProps.children下，因此组件无法正常运行。
• 第二种写法 <RecursiveComponent {...data} />
...是对象展开语法，会把data内的所有键值对拆解为独立属性传给组件，此时组件拿到的props结构为：

  {
    name: 'Level 1',
    children: [/* 嵌套数据 */]
  }
  

  和你代码中访问itemsProp.name、itemsProp.children的逻辑完全匹配，因此可以正常运行。

拓展：第一种传参方式的兼容修改方案 #

如果要保留<RecursiveComponent itemProps={data} />的传参写法，只需要调整组件接收参数的逻辑，解构出传入的itemProps属性即可：

const RecursiveComponent = ({itemProps}) => {
  const hasData = itemProps.children && itemProps.children.length;
  return (
    <>
      {itemProps.name}
      {hasData && itemProps.children.map((child) => {
        return <RecursiveComponent itemProps={child} key={child.name} />
      })}
    </>
  )
}

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