React.js 上 Data-Toggle Bootstrap 的正确语法是什么 [英] What's the correct syntax for Data-Toggle Bootstrap on React.js

问题描述

所以我对 React 和 javascript 总体上还是很新的，我只是想说明我在 HTML 中如何看待它

So I'm very new to react and javascript in general, I am just trying to lay it out how I see it in HTML

el.button({ 
    type: 'button',
    className: 'navbar-toggle',
    data-toggle: 'collapse', // Syntax Error Here
    data-target: 'navbar' // Syntax Error Here
}, 
el.span({
    className: 'sr-only'
}, 'Toggle Navigation'), 
el.span({
    className: 'icon-bar'
}),
el.span({
    className: 'icon-bar'
}), 
el.span({
    className: 'icon-bar'
})
),

纯JSReact.JS

Using purely JS React.JS

推荐答案

来自 Dom 差异 有点隐蔽，

所有 DOM 属性和属性(包括事件处理程序)都应该是驼峰式的，以符合标准的 JavaScript 风格.我们在这里故意打破规范，因为规范不一致.但是，data-* 和 aria-* 属性符合规范，并且应仅使用小写字母."

"All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. However, data-* and aria-* attributes conform to the specs and should be lower-cased only."

这有助于确定您已经正确使用的情况，但由于默认情况下 javascript 变量名称不允许使用连字符，我们还需要引用标识符.

That helps to determine the cases, which you already have correctly, but since hypens are not allowed for javascript variable names by default we also need to quote the identifiers.

因此，使用您的示例，从 React 0.13.3 开始，对我有用的符号是:

So, using your example, the notation that works for me as of React 0.13.3 is:

el.button({ 
    type: 'button',
    className: 'navbar-toggle',
    "data-toggle": 'collapse', // Syntax Error Here
    "data-target": 'navbar' // Syntax Error Here
}, 

这篇关于React.js 上 Data-Toggle Bootstrap 的正确语法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！