React поддерживает атрибуты data- * и aria- * на элементах. При использовании API-интерфейса компонента я бы предположил, что эти атрибуты могут быть установлены так же, как и остальные:
React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...)
Неа. Это не работает. Атрибут dataMyFoo игнорируется. Я где-то читал, что все они должны быть строчными. Как насчет:
React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...)
Опять же, молча игнорируется.
Возможно ли это? Если да, то в чем секрет? Я потратил немало времени на поиск, не найдя ответа.
Ответ, оказывается, заключается в том, чтобы использовать дешифрованные все нижестоящие имена для атрибута data, например:
React.DOM.div({style: {...}, 'data-my-foo': 'bar'}, ...)
Обратите внимание, что в этом случае вы должны указывать имя атрибута, поскольку дефисы не разрешены в идентификаторах в Javascript.