这是入口文件(main.js)
entry: './app/main.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
这是main里面的内容:
var React = require('react');
var ReactDOM = require('react-dom');
var ProductCss = require('./css/product.css');
require('./css/product.css');
var AppComponent = require('./components/login.js');
var RankList=require('./components/ranking.js');
ReactDOM.render(<RankList />,document.getElementById('rank-list'));
ReactDOM.render(<AppComponent />, document.getElementById('login-container'));
这两个组件是不同的两个html页面(login.html,ranking.html);
现在问题是页面上会报下面这个错:
Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
我注释掉一个,就会运行正常,两个不同页面的组件不能放到一个入口文件里面吗
还请大神指教这是什么错误,该怎么解决呢:
你的
rank-list
、login-container
分别在不同的页面,所以总会出现document.getElementById(xxx)
为 undefined 的情况,往 undefined 里渲染肯定会出错了。你在每一个 render 前加一个判空就行。
如: