Question

我正在关注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元素。

我做错了什么？

Answer 1

我怀疑您没有在Webpack配置中将HTML文件指定为入口点。 Webpack正在动态合成一个加载a * b，最明确的是，该文件不包含index.js。

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

<div id="contain"></div>

Answer 2

href = {items.url}应为href = {item.url}。否则它会在我的设置上运行。您的工具链可能有问题，但我不使用网络包，所以不要看。

使用ReactDOM.render时不变的违规错误

2 个答案: