在制作了简单的React示例页面后,我收到此错误:
未捕获错误:不变违规:_registerComponent(...):目标容器不是DOM元素.
这是我的代码:
/** @jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
这是什么意思？
我希望能够将我的React应用程序与Webpack捆绑在一起,以便放入CDN的分布式副本可以通过一堆与客户端相关的配置进行获取,调用和初始化.
看完这个和这个,我设置了我的WebPack项文件,如下所示:
// ... React requires etc.
(() => {
this.MyApp = (config) => {
// some constructor code here
}
MyApp.prototype.init = () => {
ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector);
}
})();
想法是在我的客户端,我可以做以下事情:
<script src="./bundle.js" type="text/javascript"></script>
<script type="text/javascript">
MyApp.init({
some: "config"
});
</script>
我的MyApp#init函数会将我的React应用程序渲染到客户端的某个容器中.
我是否以正确的方式思考这个问题？是否有更简单或更有效的方法来解决这个问题？
我的错误是Uncaught TypeError: Cannot set property 'MyApp' of undefined,因为this在IIFE内部undefined.我真的很想了解为什么会发生这种情况以及如何解决它的建议.
提前致谢!