0
現在、ReactJSで遊んでいます。TypeScriptを基本言語として使用して、コンポーネントを定義しています。React.createElement throwsコンポーネントが定義されていません
多くのサイトでは、ページ内にそのようなコンポーネントをレンダリングすることが可能です（私の場合はcshtml）。特に私が達成しようとしたhere。現在、私は次のエラーを取得する
<!-- ... -->
<body>
<div id="myTargetId"></div>
</body>
<!-- ... -->
<script src="@(Url.Content("~/Scripts/React/dist/commons.js"))"></script>
<script src="@(Url.Content("~/Scripts/React/dist/MyComponent.js"))"></script>
<script>
ReactDOM.render(React.createElement(MyComponent, {}), document.getElementById("targetId"));
</script>
：
Uncaught ReferenceError: MyComponent is not defined
これは私のMyComponent.tsxは、次のようになります。このすべてをパックする
import * as React from "react";
export interface IMyComponentProps { }
export interface IMyComponentState { }
export class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
render(): JSX.Element {
return (
<p>This comes from ReactJs</p>
);
}
}
そうのようなものがあるはず行うに 一緒に私はwebpackを次のように使っていますwebpack.config.js（簡略化）：
const webpack = require("webpack");
module.exports = {
entry: {
MyComponent: "./Scripts/React/Modules/MyComponent.tsx"
},
output: {
path: path.join(__dirname, "./Scripts/React/dist/"),
filename: "[name].js"
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
そして、最後に、これは、放出されたJavaScriptです：
webpackJsonp([0],[
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = __webpack_require__(1);
class MyComponent extends React.Component {
render() {
return (React.createElement("p", null, "This comes from ReactJs"));
}
}
exports.MyComponent = MyComponent;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = React;
/***/ })
],[0]);
//# sourceMappingURL=MyComponent.js.map
私はここで何をしないのですか？
上の多くのクイックスタートの
もっと
一つ私はわからないが、私は、エクスポート・デフォルト・クラスMyComponent' 'export-デフォルトを使うべきだと思います。私はtypescriptもreact.netも使用していないので、わかりません。 –
'tsx'の最後に' export default ChallengerTeamDetails; 'を書き出すと' exports.MyComponent = MyComponent;に出力されます。 exports.default = MyComponent; 'まだ動作していません – KingKerosin
MyComponentをインポートするコードを投稿してください。 – stone