React传递props不同写法运行差异疑问：报错及等价性问题咨询

JSX props 语法规则说明 #

在React的JSX语法中，给组件传递props只有两种合法写法：

• 命名属性传递：格式为 <组件名 属性名={属性值} />，花括号{}包裹的是合法JS表达式，用来给指定名称的prop赋值
• 展开属性传递：格式为 <组件名 {...待展开的对象} />，标签内无属性名的{}中必须以...开头，后面跟一个对象，会把对象的所有键值对自动拆成命名props传给组件

第二种写法报错原因 #

示例2的代码 <Component1 {{name: "Cameron"}} /> 既不符合命名属性传递规则，也不符合展开属性传递规则：
你没有指定prop的名称，JSX解析到标签内无属性名的{}时，只会判定你要使用展开语法，会强制要求{后的第一个字符是...，但你这里{后跟的是对象字面量的起始{，所以直接抛出expected '...'的语法错误。

第四种写法报错原因 #

示例4的代码 <Component1 {name: Cameron} /> 存在两处语法错误：

1. 和示例2同理，没有指定prop名称也没有加...前缀，不符合JSX的props传递规则
2. 花括号内的name: Cameron本身不是合法JS表达式：既没有用外层{}包裹成对象字面量，Cameron没有加引号会被识别为未定义的变量，就算修复变量问题，也绕回第一条的语法错误。

第三种和第四种写法完全不等价 #

示例3的{...nameObj}是合法的展开语法，运行逻辑等价于把nameObj里的所有键值对拆成命名props传递，也就是和 <Component1 name="Cameron" /> 效果完全一致。
示例4的写法本身就是语法层面的非法写法，不存在可运行的逻辑，没有和第三种写法对比等价性的基础。如果你把第四种写法修正为合法的内联展开写法 <Component1 {...{name: "Cameron"}} />，才和第三种写法等价。

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