React如何为可复用函数式组件添加任意数量的数据属性？

问题分析 #

你的代码存在几处语法和用法错误，导致无法生成期望的DOM结构：

• 组件函数定义缺少{}包裹函数体，且React中元素的class属性需改为className
• 调用组件时，dataAttributes的对象字面量写法错误，未正确使用对象扩展语法

修正后的组件代码 #

export default function Input({ dataAttributes = {} }) {
  // 默认值设为空对象，避免解构时null展开报错
  return (
    <input className="" {...dataAttributes} />
  );
}

正确的调用方式 #

你可以直接传递包含任意数量data-*键的对象，也支持用对象扩展语法合并更多属性，完全没有数量限制：

import Input from "./Input"

// 定义额外的data属性集合
const extraDataAttrs = {
  'data-custom': 'custom content',
  'data-another': 'another example'
}

// 调用组件
<Input 
  dataAttributes={{
    'data-title': 'this title',
    'data-something': 'this is something else',
    ...extraDataAttrs // 合并额外属性
  }} 
/>

最终生成的DOM #

<input class="" data-title="this title" data-something="this is something else" data-custom="custom content" data-another="another example">

关键说明 #

• 把dataAttributes默认值设为空对象，避免未传入该属性时，null展开引发的报错
• 支持任意数量的data-*属性，只要传递的对象包含对应键值对即可
• React也支持驼峰写法定义data属性，比如dataTitle: 'this title'，最终会自动转换为data-title="this title"

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