ReactJS - 如何接受 HTML 属性 data-*、aria-*？答案

【问题标题】：ReactJS - How to accept HTML attribute data-*, aria-*?ReactJS - 如何接受 HTML 属性 data-*、aria-*？
【发布时间】：2017-06-20 18:07:29
【问题描述】：

我在使用引导程序创建下拉菜单时遇到了一个小问题，在文档 https://facebook.github.io/react/docs/tags-and-attributes.html 中说 React 支持所有 data-* 和 aria-* 属性以及以下列表中的每个属性，所有属性是驼峰式大小写的...

前：

React.DOM.div(
   {
      className: 'dropdown', // available
      dataToggle: 'dropdown', // not available
      ariaExpanded: true // not available
   }
)

运行时，属性 data-* 和 aria-* 一样不可用？？我不知道为什么？我该怎么办？

提前致谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

简答：正常使用即可

data-toggle: 'dropdown'

根据 React 文档：

所有 DOM 属性和属性（包括事件处理程序）都应采用驼峰命名法，以与标准 JavaScript 样式保持一致。由于规范不一致，我们故意在这里打破规范。但是，data-* 和 aria-* 属性符合规范，只能小写。

你可以看here

我添加了一个快速的 JSFiddle，它利用 JSX 的数据属性。我知道这很混乱（这是我在短时间内想出的最好的方法）。但是你可以看到数据属性的使用和反应。

【讨论】：

【解决方案2】：

尝试如下使用：

React.DOM.div(
{
  className: 'dropdown',
  'data-toggle': 'dropdown',
  'aria-expanded': true
})

【讨论】：