Ich bin in den frühen Phasen des Verschiebens eines nicht-jsx React-Projekts auf JSX und ein wenig zu kämpfen, um es zum Laufen zu bringen.React JSX Klassenbibliothek Exporte funktionieren nicht
Ich habe es geschafft, eine einfache JSX-Komponente zu erstellen, wenn sie aus einer index.jsx-Datei erstellt wurde, aber ich versuche, mit vorhandenem Code zu integrieren, und ich möchte damit beginnen, Legacy-React-Klassen zu kombinieren mit meinen neuen JSX-Klassen.
Mein Dropdown.jsx Code sieht wie folgt aus:
class Dropdown extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return <div>
<select name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>;
}
}
export default Dropdown;
Die HTML-Datei Ich versuche, das Reagieren Komponente zu instanziiert aus ist wie folgt (dies ist, wie die meisten meiner Legacy-Code sieht)
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="dist/react-bundle.js"></script>
<script type="application/javascript">
ReactDOM.render(
React.createElement(Dropdown, {}, null),
document.getElementById('app')
);
</script>
</body>
</html>`
Und meine webpack.config.js Datei ist wie folgt:
var path = require('path') ;
module.exports = {
entry: {
react: [ './src/Dropdown.jsx' ]
},
output: {
library: "Dropdown",
libraryTarget: "umd",
path: path.join(__dirname, 'dist'),
filename: '[name]-bundle.js'
},
devtool: 'source-map',
module: {
loaders:
[
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'babel-loader'
]
},
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: [
'babel-loader'
]
}
]
}
};
ich habe ein gutes Stück von res getan Versuchen Sie, dieses Problem zu lösen, indem Sie die Einstellungen 'Bibliothek' und 'Bibliotheksziel' der Konfigurationsdatei hinzufügen.
Das Skript der Dropdown-Klasse zu erkennen SCHEINT (Ie es nicht mit einer Klasse nicht Typ Fehler gefunden Fehler), aber ich bin immer die folloiwng statt:
Warning: React.createElement: type should not be null, undefined, boolean, or number.
It should be a string (for DOM elements) or a ReactClass (for composite components).
Ich weiß, dass diese Klasse funktioniert, wenn instanziiert aus eine index.jsx-Datei
import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from './Dropdown';
ReactDOM.render(
<Dropdown />,
document.getElementById('app')
);
export default Dropdown ;
Bin ich diese Migration in die falsche Richtung? - Ich hätte gedacht, dass ich alten React-Code mit JSX-Ausgabe mischen und vergleichen könnte ...?
Vielen Dank im Voraus
haben Sie importieren React in Dropdown.jsx Ich weiß es offensichtlich, aber will nur bestätigen bcoz das ist nicht in der Datei gezeigt –
Versuchen Sie Import Reagieren am Anfang der Datei importieren Reagieren von 'reagieren'; –
Danke Piyush. Ich hatte es nicht, aber es beschwerte sich nicht beim transpilieren. Ich habe den Import jetzt hinzugefügt. –