React扩展组件时如何添加data属性？自定义DOM属性传递疑问

嘿，我来帮你搞定这个问题！你遇到的情况是因为React只有在JSX语法里写属性时，才会自动把驼峰命名转换成带短横线的格式，但直接操作props对象的时候不会做这个转换。要正确给extraProps添加data属性，有两种简单可行的方式：

方法1：直接用带短横线的字符串键名赋值 #

这是最直接的方式，直接把完整的data属性名作为字符串键，用方括号语法给extraProps赋值：

function addMyProp( extraProps, props ) {
  extraProps['data-some-attribute'] = 'something';
  return extraProps;
}

这样当组件渲染时，HTML里就会正确出现data-some-attribute="something"啦。

方法2：如果是操作DOM元素，用dataset对象 #

要是你之后需要直接操作DOM元素（不是props对象），可以用元素的dataset属性，这里驼峰命名会自动转换成短横线格式：

// 假设el是你获取到的DOM元素
el.dataset.someAttribute = 'something';
// 最终HTML会生成data-some-attribute="something"

不过回到你的场景，因为你是在处理组件的extraProps对象，所以第一种方法更适合你。

另外顺便提一下，React里像class要写成className、for要写成htmlFor是因为这些是JavaScript的保留字，但data属性没有这个限制，所以直接用原生的属性名格式就可以啦。

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