React.createElement throws组件未定义

问题描述：

我目前正在玩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'。我不使用打字稿也不反应。因此，我不确定 –

如果我在'tsx'的末尾写出'default default ChallengerTeamDetails'，它会被发送到'exports.MyComponent = MyComponent; exports.default = MyComponent;'但它仍然不起作用 – KingKerosin

将代码发布到导入MyComponent的位置。 – stone

答

Uncaught ReferenceError: MyComponent is not defined

你输入错误的是：

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

你应该建立一个bundle.js使用的WebPack。

之一，是许多快速入门的互联网https://basarat.gitbooks.io/typescript/docs/quick/browser.html

的链接。这与您发布的链接相同。它只被命名为不同的'[name] .js'，它将解析为'MyComponent.js'而不是'bundle.js'，否？ – KingKerosin

React.createElement throws组件未定义

更多

相关推荐