javascript - 在 JSX 中使用属性的 bool 值

Question

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

<input data-enable-time=true />

但是当 true 没有引号时，webpack 不会编译应用程序。插件不起作用，当带有引号时。我该怎么办？

更新。

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

当通过 eslint-plugin-react 检查代码时，这种方法避免了警告 Value must be omitted for boolean attributes [react/jsx-boolean-value] . (参见:https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)