Question

我正在使用Here的ReactJS教程来设置我的第一个组件。

现在我文件中的代码看起来非常相似：

//index.js
import React from "react";
import {
  render
} from "react-dom";

class App extends React.Component {
  render() {
    return(
      <div>
        <h1> Hello </h1>
      </div>
    );
  }
}

render( <App/> , window.document.getElementById('app'));

<!-- index.html -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ReactJS Basics</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <div id="app"></div>
  <script type="text/javascript" src="/app/bundle.js"></script>
</body>

</html>

此外，这是我的 webpack.config.js 文件：

var path = require('path');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
    entry: SRC_DIR + '/app/index.js',
    output: {
        path: DIST_DIR + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            }
        ]
    }
};

module.exports = config;

package.json ：

{
  "name": "reactjs-basics",
  "version": "1.0.0",
  "description": "Lol",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && xcopy \"src/index.html\" \"dist/\" /F /Y && webpack-dev-server --content-base src/ --inline",
    "build:prod": "webpack -p && xcopy \"src/index.html\" \"dist/\" /F /Y"
  },
  "keywords": [
    "reactjs"
  ],
  "author": "Alan",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

我使用package.json

中的npm start命令运行服务器

但由于某些未知原因，在渲染应用时出现此错误：

未捕获错误：_registerComponent（...）：目标容器不是DOM 元件。

我真的不知道如何解决这个问题，此处的所有其他类似问题都包含script以上的hook div标记，这不是真实的情况。

这里有没有人遇到类似的问题？任何帮助都会很棒

未捕获的错误：_registerComponent（...）：目标容器不是DOM元素。尝试加载第一个组件时

0 个答案: