在JSX中使用属性的布尔值

Question

我有一个React.js项目。我要使用需要这种输入属性样式的数据选择器插件：

<input data-enable-time=true />

但是，如果true不带引号，则webpack不会编译应用程序。带有引号的true时，插件不起作用。我该做什么？帮助，请。

UPD。

是的，我在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>
    )
  }
}

但是data-enable-time =“ true”不起作用（

Answer 1

您可以省略值分配；true默认情况下，将为属性分配值。

代替执行以下任何操作：

<input data-enable-time=true />
<input data-enable-time='true' />
<input data-enable-time={true} />

做：

<input data-enable-time />

Value must be omitted for boolean attributes [react/jsx-boolean-value]通过eslint-plugin-react减少代码时，此方法可避免发出警告。（请参阅：https : //github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md）

Answer 2

根据 HTML 规范，data-enable-item=true和之间没有区别data-enable-item="true"。它们在浏览器中的功能完全相同。因为不带引号的 HTML 属性实际上从未使用过并且会导致许多问题，所以 React 总是使用带引号的属性。

在下面的代码片段中，您可以检查它们是否确实具有完全相同的效果。

我怀疑您的插件不起作用可能是因为您加载插件的方式错误，而不是因为数据属性样式。您确定您只是在安装组件后才启动日期选择器（例如，在 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" />

Answer 3

答案就在这个github markdown上。我的解决方案是以以下方式编写代码：

<input data-enable-time /> /*treats as true*/
<input data-enable-time={false} /> /*treats as false*/

当您要指定 trueish 属性时，您应该省略该值，而当您要指定它时，false您不应该传递该属性