在 JSX 中使用属性的布尔值

Posted 2023-02-22

【中文标题】在 JSX 中使用属性的布尔值

【英文标题】：Using boolean-value of attributes in JSX

【发布时间】：2016-12-04 05:36:56

【问题描述】：

我有一个 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" 不起作用。

【参考方案1】：

你可以省略赋值；默认情况下，该属性将被分配一个值true。

而不是做任何：

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

做：

<input data-enable-time />

当代码通过 eslint-plugin-react 进行 linted 时，这种方法避免了警告 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）

【讨论】：

这应该是公认的答案。非常正确！

【参考方案2】：

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

在下面的 sn-p 中，您可以检查它们是否确实具有完全相同的效果。

我怀疑您的插件无法正常工作可能是因为您以错误的方式加载插件，而不是因为数据属性样式。您确定仅在组件安装后（例如，在 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" />

【讨论】：

我怀疑你有一个不同的问题，因为 flatpickr 使用 dataset 来获取数据属性，正如你在我的回答中看到的那样，dataset 的结果在有和没有的情况下是相同的引用data-enable-time。

@OP，请不要在收到回复后删除您的 cmets。我已经为您查看了 Flatpickr 源代码，我认为您应该尝试使用 data-enabletime 而不是 data-enable-time。可能是库中的错误。

别忘了将正确的答案/评论标记为正确。

【参考方案3】：

试试这样的：

<input data-enable-time=true />

【讨论】：

当代码通过 eslint-plugin-react 运行时，这会产生警告 Value must be omitted for boolean attributes [react/jsx-boolean-value]。 （见：github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…）

那么也许这条规则应该被忽略

【参考方案4】：

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

<input data-enable-time />

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

【参考方案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

【讨论】：

还是不行。可以看截图pp.vk.me/c626318/v626318440/1dadc/g8iAahZKmv4.jpg

【参考方案6】：

棘手的东西..我总是忘记这一点。 在这种情况下，只需使用： <input data-enable-time />

没有将其分配给布尔值。