web-dev-qa-db-ja.com

JSXでの属性のブール値の使用

React.jsプロジェクトがあります。このスタイルの入力属性を必要とするデータピッカープラグインを使用したい：

<input data-enable-time=true />

しかし、trueが引用符なしの場合、webpackはアプリをコンパイルしません。引用符が付いている場合、プラグインは機能しません。私は何をすべきですか？ヘルプ、pls。

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"は機能しません（

javascriptreactjsreact-jsxjsx
7
Yarik Genza

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" />
3
Ambroos

値の割り当ては省略できます。属性には、デフォルトで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 ）

12
Jon Schneider

このようなものを試してください：

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

ソリューションはeslint-plugin-reactのgithubページ。 data-enable-timeのデフォルト値がtrueであるため、このようなことをするだけです。

<input data-enable-time />
1
Jen

ローダーの問題だと思います。

  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
0
ksnietka