0
Je joue actuellement avec ReactJS en utilisant TypeScript comme langage sous-jacent auquel je définis mes composants.React.createElement throws Composant non défini
J'ai vu sur beaucoup de sites, qu'il est possible de rendre de tels composants dans une page (dans mon cas cshtml). Surtout here que j'ai essayé d'accomplir. Pour ce faire il devrait y avoir quelque chose comme:
<!-- ... -->
<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>
Actuellement je reçois l'erreur suivante:
Uncaught ReferenceError: MyComponent is not defined
C'est ce que mon MyComponent.tsx ressemble:
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>
);
}
}
Pour emballer tout cela ensemble j'utilise webpack avec le suivant webpack.config.js (simplifié):
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"
}
};
Et, enfin, c'est le JavaScript émis:
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
Qu'est-ce que je manque ici?
Je ne suis pas sûr, mais je pense que vous devez utiliser par défaut 'l'exportation vers l'exportation classe par défaut MyComponent'. Je n'utilise ni tapuscrit ni react.net donc je ne suis pas sûr –
Si j'écris 'export default ChallengerTeamDetails; 'à la fin de' tsx' il est émis dans 'exports.MyComponent = MyComponent; exports.default = MyComponent; 'mais cela ne fonctionne toujours pas – KingKerosin
Postez le code où vous importez MyComponent. – stone