如何在React中的渲染中设置HTML数据属性？

Question

我想在React的render()中设置我的数据属性（特别是在使用map()时）。

这是我想发生的事情：

let ownDataAttribute = 'data-foo'
...
render() {
    return (
    <>
    {
        array.map(item => <div [ownDataAttribute]="foobar" >{item.name}</div>
    }
    </>)
}

我想到的一个解决方案是：

let ownDataAttribute= "foo"

array.map(item => {
    let div = document.createElement('div')
    div.dataset[ownDataAttribute] = "foobar"

    // other code follows
})

但是，我发现解决方案太繁琐。是否有与第一个代码段相似的解决方案？

Answer 1

只需使用spread operator将每个键值对作为道具传递。

// your attributes
const myAttributes = {
  ownDataAttribute: 'data-foo',
  otherAttributes: 'others'
}

array.map(item => (
  <div
    {...myAttributes} // all key-value pair are passed as prop
  >
    {item.name}
  </div>
))

Answer 2

这应该做的，下面的代码使用Spread syntax

{
   array.map(item => {
   let attr[ownDataAttribute] = "foobar";
      return <div {...attr} >{item.name}</div>
   })
}