ReactJs: установка атрибутов данных для элементов без JSX

React поддерживает атрибуты data- * и aria- * на элементах. При использовании API-интерфейса компонента я бы предположил, что эти атрибуты могут быть установлены так же, как и остальные:

React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...)

Неа. Это не работает. Атрибут dataMyFoo игнорируется. Я где-то читал, что все они должны быть строчными. Как насчет:

React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...)

Опять же, молча игнорируется.

Возможно ли это? Если да, то в чем секрет? Я потратил немало времени на поиск, не найдя ответа.

ОТВЕТЫ

Ответ 1

Ответ, оказывается, заключается в том, чтобы использовать дешифрованные все нижестоящие имена для атрибута data, например:

React.DOM.div({style: {...}, 'data-my-foo': 'bar'}, ...)

Обратите внимание, что в этом случае вы должны указывать имя атрибута, поскольку дефисы не разрешены в идентификаторах в Javascript.