Question

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

  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;
  }

所以我会有像这样的项目-将被循环以创建标记。

let items = [{
  "name": "Mercury",
  "category": "transition",
  "weight": "122",
  "symbol": "Hg",
  "number": 12
}, {
  "name": "Tellurium",
  "category": "metal",
  "weight": "12",
  "symbol": "Te",
  "number": 232
}, {
  "name": "Bismuth",
  "category": "rock",
  "weight": "2200.59",
  "symbol": "Bi",
  "number": 1666
}, {
  "name": "Cadmium",
  "category": "metal",
  "weight": "1200",
  "symbol": "Cd",
  "number": 454
}]

目前，我已经对数据属性进行了硬编码-因此，我需要使用散布运算符返回具有这些数据属性的平面数组或对象，因此我认为它应该返回具有数据属性集的对象？

{
  "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>

Answer 1

我会将您的attributeGeneration简化为

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

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

let items = [
  {
    name: "Mercury",
    category: "transition",
    weight: "122",
    symbol: "Hg",
    number: 12
  },
  {
    name: "Tellurium",
    category: "metal",
    weight: "12",
    symbol: "Te",
    number: 232
  },
  {
    name: "Bismuth",
    category: "rock",
    weight: "2200.59",
    symbol: "Bi",
    number: 1666
  },
  {
    name: "Cadmium",
    category: "metal",
    weight: "1200",
    symbol: "Cd",
    number: 454
  }
];

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

items.forEach(item => console.log(attributeGeneration(item)));

React.js在对象的键上创建自定义数据属性

1 个答案: