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中的标识符不允许使用连字符.