如何在 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 syntax

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

Answer 2

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

// 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 数据属性？

How to set HTML data attributes inside render in React?

html

reactjs

custom-data-attribute