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 syntax

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

Answer 2

只需使用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>
))

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

2 个答案: