Question

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

<input data-enable-time=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 />

当通过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）

Answer 2

尝试这样的事情：

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

Answer 3

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

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

我怀疑你的插件不工作可能是因为你以错误的方式加载你的插件，而不是因为数据属性样式。您是否确定在安装组件后才启动日期选择器（例如，在componentDidMount中）？

＆＃13;

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);

＆＃13;

<input id=input-no-attribute-quotes data-test=true />
<input id="input-with-attribute-quotes" data-test="true" />

＆＃13;

Answer 4

解决方案在eslint-plugin-react的github页面上。因为数据启用时间的默认值为true，所以您只需要这样做。

<input data-enable-time />

Answer 5

我猜这是装载机问题，试着把

  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',],
        },


      },
      ...
    ],

  },

进入你的webpack.conf.js文件并通过npm

安装每个插件

例如：

npm install --save-dev babel-plugin-react-html-attrs

Answer 6

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

<input data-enable-time />

当你要指定一个真实的属性时，你应该发出值，当你要指定它flase时，你不应该传递属性

在JSX中使用属性的布尔值

6 个答案: