Javascript Reactjs在对象的键上创建自定义数据属性

我正在尝试创建一个同位素应用程序，需要创建一个函数来创建自定义数据属性

  attributeGeneration(item){
    let keys = Object.keys(item);
    console.log("keys", keys);

    var dataObj = {};
    var i;
    for (i = 0; i < keys.length; i++) {
      console.log("keys[i]", keys[i]);
      var obj = {
        ["data-"+keys[i]]: item[keys[i]]
      }

      dataObj = {
        ...obj,
      }
    }

    console.log("dataObj", dataObj);
    return dataObj;
  }

目前我对数据属性进行了硬编码，所以我需要使用spread操作符返回具有这些数据属性的平面数组或对象，所以我认为它应该返回具有数据属性集的对象

{
  "data-name": "Mercury",
  "data-category": "transition",
  "data-weight": "122",
  "data-symbol": "Hg",
  "data-number": 12
}


    <div 
      className="grid" 
      ref={this.myRef}
    >
    {
      items.map((item, j) => {
        return(
          <div
            key={j} 
            className="grid-item" 
            data-category={item.category}
            data-name={item.name}
            data-weight={item.weight}
            data-symbol={item.symbol}
            data-number={item.number}
            {...this.attributeGeneration(item)}
          >
            <h3>{item.name}</h3>
            <p>{item.weight}</p>
            <p>{item.number}</p>
            <p>{item.symbol}</p>
            <p>{item.category}</p>
          </div>
        )
      })
    }
    </div>

{
“数据名称”：“Mercury”，
“数据类别”：“转换”，
“数据权重”：“122”，
“数据符号”：“Hg”，
“数据编号”：12
}
{
items.map（（item，j）=>{
返回(
{item.name}
{item.weight}

{item.number}

{item.symbol}

{item.category}

)
})
}

我会将您的

属性生成简化为

const attributeGeneration = (item) =>
  Object.entries(item).reduce(
    (dataAttributes, [key, value]) => ({
      ...dataAttributes,
      [`data-${key}`]: value
    }),
    {}
  );

保存创建临时变量和对象。以数组形式获取项键-值对，并使用转换后的键和当前值将其缩减为新对象


let项目=[
{
名称：“水星”，
类别：“过渡”，
重量：“122”，
符号：“Hg”，
电话：12
},
{
名称：“碲”，
类别：“金属”，
重量：“12”，
符号：“Te”，
电话：232
},
{
名称：“铋”，
类别：“摇滚”，
重量：“2200.59”，
符号：“Bi”，
电话：1666
},
{
名称：“镉”，
类别：“金属”，
重量：“1200”，
符号：“Cd”，
电话：454
}
];
常量属性生成=（项）=>
Object.entries（item）.reduce(
（数据属性，[键，值]）=>({
…数据属性，
[`data-${key}`]：值
}),
{}
);
items.forEach（item=>console.log（attributeGeneration（item））
那么，您只是想为
项
对象上的每个属性动态添加data-x属性吗？是否存在问题？动态添加一个data-x属性--我试图减少此组件的硬编码方面--对，那么您的实现是否存在问题？dataObj={…obj，…dataObj}^修复了它--需要像这样使用spread操作符来合并对象
const attributeGeneration = (item) =>
  Object.entries(item).reduce(
    (dataAttributes, [key, value]) => ({
      ...dataAttributes,
      [`data-${key}`]: value
    }),
    {}
  );