如何修复错误:_registerComponent(...):目标容器不是DOM元素.错误？

Question

我使用Webpack编译了我的项目.但是,当我启动我的html时,只显示我的背景颜色,但没有其他内容,我在控制台中收到以下错误:

Error: _registerComponent(...): Target container is not a DOM element.

这是我的HTML:

<!doctype html>
<html lang="en">
  <head>
    <script src="public/bundle.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="cssWEB.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我的JS:

import React from 'react';
import ReactDOM from 'react-dom';
import {Element, scroller} from 'react-scroll';


const Component = React.createClass({
    componentDidMount: function() {
        scroller.scrollTo('myScroller', {
            duration: 1500,
            delay: 500,
            smooth: true
        });
    },

    render: function() {
        return (
            <div>
              <link rel="stylesheet/less" href="style.less" type="text/css" />
              <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
              <link type="text/javascript" href="jscode.js"></link>


              <header>
                My Page
              </header>

              <body ng-app="App">
                <div class="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
                  <div class="front"><span>Resume</span></div>
                  <div class="back"></div>
                  <div class="top"></div>
                  <div class="bottom"></div>
                  <div class="left"></div>
                  <div class="right"></div>
                </div>

                <div class="wrap2">
                  <div class="cube" change-background>
                    <div class="front" colorcode="#f45642"><span>Work</span></div>
                    <div class="back"></div>
                    <div class="top"></div>
                    <div class="bottom"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                  </div>
                </div>

                <div class="wrap3">
                  <div class="cube" change-background>
                    <div class="front" colorcode="#f45642"><span>Contact</span></div>
                    <div class="back"></div>
                    <div class="top"></div>
                    <div class="bottom"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                  </div>
                </div>
              </body>

              <Element name="link1">
                <div class="bg2" id="linkhere"></div>
              </Element>

              <div class="slide1">
              </div>

              <div class="slidechild1">
              <div class="centerbox">
              <div class="center">
                <ul>
                  <li ng-click="clicked2()" id="B1">aa</li>
                  <li id="B2">cc.i</li>
                </ul>
              </div>
              </div>
              </div>
            </div>

        );
    }
});

ReactDOM.render(
  <Component />,
  document.getElementById("root")
);

我的代码出现此错误有什么问题？

Answer 1

因为document.getElementById("root")在文档加载后会返回一个DOM元素,这表明您的脚本在创建DOM元素之前运行.

查看您的HTML确认了这一点.您加载bundle.js到头部,但此时文档正文尚未加载.

要解决此问题,可以将脚本标记移动到div元素下方,以确保在脚本运行时创建了元素.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="cssWEB.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>