ReactJs：在没有JSX的元素上设置数据属性

Question

React支持元素上的data- *和aria- *属性。使用组件API时，我猜这些属性可以像其余的一样设置：

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

不。这不起作用。默认忽略dataMyFoo属性。我在某处读到这些都需要全部小写。怎么样：

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

再次，默默地忽略。

这可能吗？如果是这样，秘密是什么？我花了很长时间搜索而没有找到答案。

Answer 1

事实证明，答案是使用连字符分隔的全部小写名称作为数据属性，如下所示：

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

请注意，在这种情况下必须引用属性名称，因为Javascript中的标识符不允许使用连字符。