React.createElement抛出未定义的组件

Question

I'm currently playing around with ReactJS using TypeScript as the underlying language wher I define my components. 我目前正在使用TypeScript作为定义我的组件的基础语言来使用ReactJS 。

I saw on many sites, that it is possible to render such components within a page (in my case cshtml ). 我在许多站点上看到，可以在页面中呈现此类组件（在我的情况下为cshtml ）。 Especially here which I tried to accomplish. 特别是在这里，我试图做到。 To do so there should be something like: 为此，应该有以下内容：

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

Currently I get the following error: 目前，我收到以下错误：

Uncaught ReferenceError: MyComponent is not defined 未捕获的ReferenceError：未定义MyComponent

This is what my MyComponent.tsx looks like: 这是我的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>
        );
    }
}

To pack this all together I am using webpack with the following webpack.config.js (simplified): 为了将所有这些打包在一起，我将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"
    }
};

And, finally, this is the emitted JavaScript : 最后，这是发出的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

What am I missing here? 我在这里想念什么？

Answer 1

Uncaught ReferenceError: MyComponent is not defined 未捕获的ReferenceError：未定义MyComponent

Your import is wrong: 您的输入错误：

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

You should be building a bundle.js using webpack. 你应该建立一个bundle.js使用的WebPack。

More 更多

One of many quickstarts on the internet https://basarat.gitbooks.io/typescript/docs/quick/browser.html 互联网上众多快速入门之一https://basarat.gitbooks.io/typescript/docs/quick/browser.html

React.createElement抛出未定义的组件

问题描述

1 个解决方案

解决方案1
0 2017-10-18 23:24:10

More 更多

React.createElement抛出未定义的组件

问题描述

1 个解决方案

解决方案1 0 2017-10-18 23:24:10

More 更多

解决方案1
0 2017-10-18 23:24:10