Javascript React.createElement抛出未定义的组件_Javascript_Asp.net_Reactjs_Typescript_Webpack

Javascript React.createElement抛出未定义的组件

javascript asp.net reactjs typescript webpack

Javascript React.createElement抛出未定义的组件,javascript,asp.net,reactjs,typescript,webpack,Javascript,Asp.net,Reactjs,Typescript,Webpack,我目前正在使用ReactJS作为定义组件时的底层语言我在许多网站上看到，在一个页面中呈现这样的组件是可能的（在我的例子中是cshtml）。尤其是我试图完成的。要做到这一点，应该采取以下措施：  <body> <div id="myTargetId"></div> </body>  <script src="@(Url.Content("~/Scripts/R

我目前正在使用

ReactJS

作为定义组件时的底层语言

我在许多网站上看到，在一个页面中呈现这样的组件是可能的（在我的例子中是

cshtml

）。尤其是我试图完成的。要做到这一点，应该采取以下措施：

<!-- ... -->
<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>

为了将这一切打包在一起，我使用了

webpack

和以下

webpack.config.js

（简化）：

最后，这是发出的

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

您的导入错误：

<script src="@(Url.Content("~/Scripts/React/dist/commons.js"))"></script>
<script src="@(Url.Content("~/Scripts/React/dist/MyComponent.js"))"></script>

您应该使用webpack构建一个

bundle.js

更多互联网上众多快速入门产品之一

未捕获引用错误：未定义MyComponent

您的导入错误：

<script src="@(Url.Content("~/Scripts/React/dist/commons.js"))"></script>
<script src="@(Url.Content("~/Scripts/React/dist/MyComponent.js"))"></script>

您应该使用webpack构建一个

bundle.js

internet上的许多快速入门之一

我不确定，但我认为您应该使用默认导出-

导出默认类MyComponent

。我没有使用typescript或react.net，因此我不确定是否编写了

export default ChallengerTeamDetails在tsx
的末尾，它被发送到exports.MyComponent=MyComponent；exports.default=MyComponent但仍然不起作用。将代码张贴到导入MyComponent的位置。@Skypeckes我不在任何地方导入。我的网站上没有提到这一点。另一方面，他们没有使用网页包。我还添加了问题的链接我不确定，但我认为您应该使用默认导出-导出默认类MyComponent
。我没有使用typescript或react.net，因此我不确定是否编写了export default ChallengerTeamDetails在tsx
的末尾，它被发送到exports.MyComponent=MyComponent；exports.default=MyComponent但仍然不起作用。将代码张贴到导入MyComponent的位置。@Skypeckes我不在任何地方导入。我的网站上没有提到这一点。另一方面，他们没有使用网页包。我还添加了我已经添加的问题的链接。这和你发布的链接是一样的。它只是被命名为不同的[name].js
，它将解析为MyComponent.js
，而不是bundle.js
，不？我已经这样做了。这和你发布的链接是一样的。它只是被命名为不同的[name].js
，它将解析为MyComponent.js
，而不是bundle.js，不是吗？
<script src="@(Url.Content("~/Scripts/React/dist/commons.js"))"></script>
<script src="@(Url.Content("~/Scripts/React/dist/MyComponent.js"))"></script>