使用 ReactDOM.render 时出现不变的违规错误答案

【问题标题】：invariant violation error when using ReactDOM.render使用 ReactDOM.render 时出现不变的违规错误
【发布时间】：2016-01-28 05:10:17
【问题描述】：

我正在关注relay-101 以获得关于中继的帮助。当我运行下面的代码时，我得到了一个不变的违规错误。

webpack.config.js：

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {stage: 0}
      }
    ]
  },

  output: {filename: 'index.bundle.js', path: './'}
};

index.js

let React = require('react');
let ReactDOM = require('react-dom');

class Item extends React.Component{
  render(){
    let item = this.props.store.item;

    return (
      <div>
         <h1><a href={items.url}>{item.title}</a></h1>
         <h2>{item.score} - {item.by.id}</h2>
         <hr />
      </div>
      );
  }
};

let mountNode = document.getElementById('contain');
let item = {
  id : '1337',
  url : 'http://google.com',
  title : 'Google',
  score : 100,
  by : {id : 'clay'}
};
let store = {item};
let rootComponent = <Item store={store} />;
ReactDOM.render(rootComponent, mountNode);

index.html

<html>
<head>
</head>
<body>
  <div id='contain'>
  </div>
  <script src="/index.bundle.js"  charset="utf-8" ></script>
</body>
</html>

当我运行上面的代码时，我遇到了这样的错误：

未捕获的错误：不变违规：_registerComponent(...)：目标容器不是 DOM 元素。

我做错了什么？

【问题讨论】：

console.log(mountNode) 中有什么？
@Francios Richard：它给了 Null
所以这是您的问题，可能是 doctype html 丢失或某些内容未正确加载
@Francios Richard：我添加了 doctype html，即使出现了同样的错误

标签： javascript reactjs

【解决方案1】：

我怀疑您没有在 Webpack 配置中指定 HTML 文件作为入口点。 Webpack 正在动态合成一个以加载 index.js，而且最肯定的是，该文件不会包含 <div id="contain"></div>。

您可以学习如何使用Webpack HTML plugin 编写自己的自定义模板，但几乎可以肯定最简单的方法是在运行时生成挂载点。

const React = require('react');
const ReactDOM = require('react-dom');

class Item extends React.Component {
  render(){
    let item = this.props.store.item;
    return (
      <div>
         <h1><a href={items.url}>{item.title}</a></h1>
         <h2>{item.score} - {item.by.id}</h2>
         <hr />
      </div>
    );
  }
};

// Create the mount point and attach it to the DOM
const mountNode = document.createElement('div');
document.body.appendChild(mountNode);

const item = {
  id: '1337',
  url: 'http://google.com',
  title: 'Google',
  score: 100,
  by: {id: 'clay'},
};
ReactDOM.render(
  <Item store={{item}} />, 
  mountNode
);

【讨论】：

【解决方案2】：

href={items.url} 应该是 href={item.url}。否则它会在我的设置上运行。你的工具链可能有问题但是我没有使用webpack所以看不到。

【讨论】：