React父组件向子组件传同名prop及props展开报错问题

需要确认不同父组件向同一子组件同名prop传递不同值的标准实现方案，同时排查现有props展开写法的报错问题。
涉及的代码片段如下：

Parent1 示例代码 #

<ChildComponent
  prop1={prop1}
  prop2={prop2}
  paymentProcessingDate={Date.now()}
  {...passThroughProps}
>

Parent2 示例代码 #

<ChildComponent
  prop1={prop1}
  prop2={prop2}
  paymentProcessingDate={carServiceAppointment.date}
  {...passThroughProps}
>

当前现象：两个父组件复用ChildComponent，需要给paymentProcessingDate传入不同值，收到报错提示passThroughProps的展开操作会始终覆盖paymentProcessingDate。 #

报错根因 #

JSX对props的解析规则是：后写入的同名属性会覆盖先写入的属性。
你当前把...passThroughProps展开操作放在了手动声明的paymentProcessingDate后面，只要passThroughProps对象中存在paymentProcessingDate字段，就会覆盖你前面手动传入的值。静态检查工具是识别到了这个潜在的覆盖风险才抛出提示，和你是不是在组件调用处首次定义这个prop没有关系。
另外，不同父组件给同一个子组件的同名prop传递不同取值是React原生支持的标准用法，不需要做任何特殊封装，子组件按常规方式读取对应props即可正常运行。

修复方法 #

调整props的书写顺序，把通用属性的展开操作放在前面，需要手动指定固定值的属性放在后面，保证手动传入的属性优先级最高，既不会被展开属性覆盖，也能消除静态检查报错：

修复后Parent1代码 #

<ChildComponent
  {...passThroughProps}
  prop1={prop1}
  prop2={prop2}
  paymentProcessingDate={Date.now()}
>

修复后Parent2代码 #

<ChildComponent
  {...passThroughProps}
  prop1={prop1}
  prop2={prop2}
  paymentProcessingDate={carServiceAppointment.date}
>

补充说明 #

• 如果你实际业务逻辑就是需要passThroughProps中的paymentProcessingDate优先级更高，那就不需要手动重复声明这个prop，直接在组装passThroughProps时传入对应值即可。
• 这个报错属于静态风险提示，不代表你当前代码一定会运行出错，但调整顺序符合React官方推荐的props书写规范，能避免后续迭代中出现意外的prop值覆盖问题。

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