Javascript 在 JSX 中使用布尔值属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38659884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using boolean-value of attributes in JSX
提问by Yarik Genza
I have a React.js project. I want to use data-picker plugin wich require this style of input-attributs:
我有一个 React.js 项目。我想使用需要这种输入属性样式的数据选择器插件：
<input data-enable-time=true />
But webpack don't compile app, when true is without quotes. Plugin dont work, when true with quotes. What i should do? Help, pls.
但是 webpack 不编译应用程序，当 true 没有引号时。插件不起作用，当带引号时为真。我该做什么？帮助，请。
UPD.
更新。
Yes, i run picker in componentDidMount() It works, but displaying only date, without time.
是的，我在 componentDidMount() 中运行选择器它可以工作，但只显示日期，不显示时间。
import React, {Component} from 'react'
const Flatpickr = require('flatpickr');
export default class Date extends Component {
componentDidMount() {
let dateInput = document.getElementById('fPicker');
//init picker
new Flatpickr(dateInput);
}
render() {
return(
<div className="dateInputContainer">
<input id="fPicker" className="flatpickr" data-enable-time="true" />
</div>
)
}
}
But data-enable-time="true" dont work (
但是 data-enable-time="true" 不起作用（
采纳答案by Ambroos
According to the HTML spec, there is no difference between data-enable-item=trueand data-enable-item="true". They will function exactly the same in browsers. Because HTML attributes without quotes are practically never used and can lead to a number of issues, React always uses quoted attributes.
根据 HTML 规范，data-enable-item=true和之间没有区别data-enable-item="true"。它们在浏览器中的功能完全相同。因为不带引号的 HTML 属性实际上从未使用过并且会导致许多问题，所以 React 总是使用带引号的属性。
In the snippet below you can check that they do indeed have the exact same effect.
在下面的代码片段中，您可以检查它们是否确实具有完全相同的效果。
I suspect your plugin not working is probably because you are loading your plugin the wrong way, and not because of the data attribute style. Are you sure you're only starting the date picker after the component has been mounted (for example, in componentDidMount)?
我怀疑您的插件不起作用可能是因为您加载插件的方式错误，而不是因为数据属性样式。您确定您只是在安装组件后才启动日期选择器（例如，在 componentDidMount 中）？
var withoutQuotes = document.getElementById('input-no-attribute-quotes');
var withQuotes = document.getElementById('input-with-attribute-quotes');
console.log('Are the data attributes for test exactly the same? ' + (withoutQuotes.dataset.test === withQuotes.dataset.test ? 'Yes.' : 'No.'));
console.log('Data attributes without quotes\n', withoutQuotes.dataset);
console.log('Data attributes with quotes\n', withQuotes.dataset);<input id=input-no-attribute-quotes data-test=true />
<input id="input-with-attribute-quotes" data-test="true" />回答by Jon Schneider
You can just omit the value assignment; the attribute will be assigned a value of trueby default.
你可以省略赋值；true默认情况下，该属性将被分配一个值。
Instead of doing any of:
而不是执行以下任何操作：
<input data-enable-time=true />
<input data-enable-time='true' />
<input data-enable-time={true} />
Do:
做：
<input data-enable-time />
This approach avoids the warning Value must be omitted for boolean attributes [react/jsx-boolean-value]when the code is linted via eslint-plugin-react. (See: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
Value must be omitted for boolean attributes [react/jsx-boolean-value]当代码通过eslint-plugin-react lint时，这种方法避免了警告。（参见：https: //github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md）
回答by ksnietka
Try something like this:
尝试这样的事情：
<input data-enable-time={true} />
回答by Jen
The solution is on eslint-plugin-react's github page. You would just do something like this since data-enable-time's default value is true.
解决方案在eslint-plugin-react的 github 页面上。由于 data-enable-time 的默认值为 true，因此您只需执行此类操作即可。
<input data-enable-time />
回答by ksnietka
i guess thats a loader problem, Try to put
我想那是装载机的问题，试着把
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-object-assign', 'transform-class-properties', 'transform-decorators-legacy', 'transform-es2015-modules-commonjs-simple',],
},
},
...
],
},
into your webpack.conf.js file and install every plugin via npm
进入你的 webpack.conf.js 文件并通过 npm 安装每个插件
for example:
例如：
npm install --save-dev babel-plugin-react-html-attrs
