Как установить атрибуты данных HTML внутри рендера в React? - PullRequest
Новая
       6

Как установить атрибуты данных HTML внутри рендера в React?

0 голосов
/ 23 октября 2019

Я хочу установить свои атрибуты данных внутри render() в React (особенно при использовании map()).

Вот что я хочу сделать: 

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

OneРешение, о котором я подумал: 

let ownDataAttribute= "foo"

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

    // other code follows
})

Однако я нахожу решение слишком утомительным. Есть ли решение, которое будет похоже на первый показанный фрагмент?

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Просто используйте оператор распространения для передачи каждой пары ключ-значение в качестве реквизита. 

// 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>
))
0 голосов
/ 23 октября 2019

Это должно сделать работу, код ниже использует Синтаксис распространения 

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