React以对象形式传递props的特殊语法原理求解

首先是格式化后的原代码片段：

<>
  {items.map((item, i) => {
    return <ItemComponent key={i} {...{ [resourceName]: item }} />;
  })}
</>

逐部分拆解运行逻辑：

• 最外层<>是React Fragment的简写，作用是包裹多个同级JSX元素，不会在DOM树中生成额外的冗余节点。
• {items.map((item, i) => {...})是JSX中嵌入JavaScript表达式的标准写法，作用是遍历items数组，为数组的每一项生成对应的ItemComponent组件实例。
• 组件上的key={i}是React列表渲染要求的唯一标识属性，这里使用数组下标作为每个列表项的key值。
• 最容易混淆的{...{ [resourceName]: item }}是两层JS语法的结合：
  1. 外层...是React的属性展开操作符，作用是把后面跟着的对象的所有键值对，全部拆成独立的props传递给组件。
  2. 内层{ [resourceName]: item }是ES6的计算属性名语法：resourceName是一个变量，它的值是什么，这个对象的键名就是什么。如果此时resourceName的值是字符串"name"，那这个对象就等价于{ name: item }。
  3. 两者结合之后，这段代码的效果就等价于给ItemComponent传递了一个名为resourceName变量对应值的prop，prop的值是当前遍历到的数组项item。
• 你观察到能拿到name属性，就是因为这段代码执行时resourceName变量的取值恰好是字符串name，所以展开后就相当于传递了name={item}这个prop，组件内部自然就能获取到name属性了。

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