react+webpack打包时模块化问题

Question

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(<AppComponent />, document.getElementById('login-container'));

ReactDOM.render(<RankList />,document.getElementById('rank-list'));

如上面的代码，这个在main.js中render两个不同页面内容，但是<RankList />组件在页面里会报（bundle.js:1393 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.），是我使用的方式不对吗，还请大神指教

Answer 1

Target container is not a DOM element.

在 ReactDOM.render(<RankList />,document.getElementById('rank-list')); 这行打个断点调一下，看看页面里 document.getElementById('rank-list') 这个渲染容器节点是不是不存在