这是入口文件(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. 我注释掉一个,就会运行正常,两个不同页面的组件不能放到一个入口文件里面吗 还请大神指教这是什么错误,该怎么解决呢:
你网上看到的绝大部分webpack+react的教程都是动态的把生成的文件插入到html文件里的,所以你肯定指定了一个html文件,于是那个html里面要不就只有id为rank-lish的某个div(假设你用的div),要不就只有id为login-container的div
你发现undefined一类的错误的时候不尝试console.log一下你使用的资源吗?
你的rank-list、login-container分别在不同的页面,所以总会出现 document.getElementById(xxx) 为 undefined 的情况,往 undefined 里渲染肯定会出错了。
你在每一个 render 前加一个判空就行。如: