ReactJs:在没有 JSX 的情况下设置元素的数据属性

Question

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

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

不。那是行不通的。 dataMyFoo 属性被默默地忽略。我在某处读到这些必须全部小写。怎么样:

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

再次，默默地忽略。

这可能吗？如果是这样， secret 是什么？我找了好久都没有找到答案。

Answer 1

事实证明，答案是对数据属性使用连字符分隔的所有小写名称，如下所示:

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

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