0
현재 구성 요소를 정의 할 때 기본 언어로 TypeScript을 사용하여 ReactJS을 사용 중입니다.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>
을 나는 다음과 같은 오류를 얻을 :
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>
);
}
}
이 모든 팩 :
Uncaught ReferenceError: MyComponent is not defined
이 내 MyComponent.tsx는 모습입니다 함께 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''수출국은 기본값을 사용한다고 생각합니다. 나는 typescript도 react.net도 사용하지 않기 때문에 확실하지 않다. –
'tsx'의 끝에서'export default ChallengerTeamDetails;'를 쓰면'exports.MyComponent = MyComponent; exports.default = MyComponent;'여전히 작동하지 않습니다. – KingKerosin
MyComponent를 가져 오는 코드를 게시하십시오. – stone