使用ReactDOM.render时的不变量冲突错误

invariant violation error when using ReactDOM.render

本文关键字：不变量 冲突 错误 ReactDOM render 使用      更新时间：2023-09-26

我遵循继电器-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>

当我运行上面的代码时，我得到了如下错误:

Uncaught Error: Invariant Violation: _registerComponent(…):Target container is not a DOM element.

我做错了什么?

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

你可以学习如何使用Webpack HTML插件来编写你自己的自定义模板，但几乎可以肯定的是，最简单的事情是在运行时生成挂载点。

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
);

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

相关文章：