0
jsx以外のReactプロジェクトをJSXに移行し、少しでも苦労して作業を開始する初期段階です。React JSXクラスライブラリのエクスポートが機能していません
私は、index.jsxファイルから作成するとシンプルなJSXコンポーネントを作成することができましたが、既存のコードと統合しようとしています。私は 'レガシー' Reactクラス私の新しいJSXクラスと一緒に。
マイDropdown.jsxコードは次のようになります。
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;
次のように私はからリアクトコンポーネントをインスタンス化しようとしているhtmlファイルがある（これは私のレガシーコードのほとんどがどのように見えるかである）
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'
]
}
]
}
};
私は解像度の公平なビットを行ってきた：次のように
<!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>`
スクリプトが（それは型エラーを発見していないクラスで失敗しないのIE）ドロップダウンクラスを認識しているようだが、私が代わりにfolloiwngを取得しています：
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).
私はからインスタンス化するとき、このクラスの作品を知っていますindex.jsxファイル
import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from './Dropdown';
ReactDOM.render(
<Dropdown />,
document.getElementById('app')
);
export default Dropdown ;
私は間違った方法でこの移行に近づいていますか？ - JSX出力と古いReactコードを混在させて一致させることができると思ったでしょうか？
のWebPACKと事前
React in Dropdown.jsx私は明らかに分かっていますが、ファイルに表示されていないbcozのものを確認したいのです –
インポートを試みてくださいファイルの先頭で反応してください。 –
ありがとうPiyush。私はいなかったが、それは蒸散時に不平を言うことはなかった。私は今インポートを追加しました。 –