React span元素中className前后使用扩展props的差异

核心逻辑很简单：当同一个属性同时通过对象扩展语法（{...a}）和显式声明出现在组件上时，后面写的属性会覆盖前面的。

咱们拆解两种写法：

第一种写法 #

var a = { className: 'my-secondary-classname' }; 
<span className="my-span-classname" {...a}>abc</span>

这里先给span显式设置了className="my-span-classname"，随后通过{...a}扩展出了className: 'my-secondary-classname'。因为扩展写在后面，所以最终span的className是my-secondary-classname——后面的扩展属性覆盖了前面的显式值。

第二种写法 #

var a = { className: 'my-secondary-classname' }; 
<span {...a} className="my-span-classname">abc</span>

这次是先通过{...a}扩展出className: 'my-secondary-classname'，之后再显式声明className="my-span-classname"。显式声明写在后面，所以最终span的className是my-span-classname——后面的显式值覆盖了前面扩展来的属性。

这个规则适用于所有React组件的props，不只是className。只要是重复的属性，后出现的总会覆盖先出现的。

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