Verwenden boolescher Wert von Attributen in JSX

Question

Ich habe ein React.js-Projekt. Ich mag Daten-Picker-Plugin Weicht verwenden, erfordern diese Art von Input-attribute:

<input data-enable-time=true /> 

Aber webpack nicht kompilieren App, wenn es wahr ist, ohne Anführungszeichen. Plugin funktioniert nicht, wenn es mit Anführungszeichen stimmt. Was sollte ich tun? Hilfe, bitte.

UPD.

Ja, ich starte Picker in ComponentDidMount() Es funktioniert, aber nur Datum, ohne Zeit angezeigt.

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

Aber Daten-enable-Zeit = "true" nicht funktionieren (

Answer 1

Nach der HTML-Spezifikation, gibt es keinen Unterschied zwischen data-enable-item=true und data-enable-item="true". Sie werden genau in Browsern funktionieren. Da HTML-Attribute ohne Anführungszeichen praktisch nie verwendet werden und zu einer Reihe von Problemen führen können, verwendet React immer in Anführungszeichen gesetzte Attribute.

In dem Ausschnitt unten können Sie überprüfen, dass sie tatsächlich den gleichen Effekt haben.

Ich vermute, dass Ihr Plugin nicht funktioniert, ist wahrscheinlich, weil Sie Ihr Plugin den falschen Weg laden, und nicht wegen der Datenattributstil. Sind Sie sicher, dass Sie die Datumsauswahl erst nach dem Mounten der Komponente starten (z. B. in 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 2

Probieren Sie etwas wie folgt aus:

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

Answer 3

i, das ist ein Ladegerät Problem erraten, Try

zu setzen

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


     }, 
     ... 
    ], 

    }, 

in Ihre Datei webpack.conf.js und installieren Sie jedes Plugin über npm

zum Beispiel:

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