目标容器不是DOM元素React.js

God*_*ped 15 html javascript reactjs

我已经看过所有其他有这个问题的帖子,但我仍然对为什么遇到这个错误感到困惑.我确定我在我的身上使用了id

刚刚开始玩React,所以我确定它很傻.

我在这里先向您的帮助表示感谢.

代码如下.

的index.html

<html>
    <head>
    </head>
    <body>
        <div id="testing"></div>
        <script src="index.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('testing'));
registerServiceWorker();
Run Code Online (Sandbox Code Playgroud)

完整错误消息:

不变

../app/node_modules/fbjs/lib/invariant.js:42 renderSubtreeIntoContainer
../app/node_modules/react-dom/cjs/react-dom.development.js:15144 render
../app/node_modules/react-dom/cjs/react-dom.development.js:15254
? 3 stack frames were expanded.
./src/index.js
../app/src/index.js:6
  3 | import './index.css';
  4 | import App from './App';
  5 | 
> 6 | ReactDOM.render(<App />, document.getElementById('testing'));
  7 | 
  8 | 
  9 | 
View compiled
? 6 stack frames were expanded.
__webpack_require__
../app/webpack/bootstrap 4755e61baeec1360d412:678
fn
../app/webpack/bootstrap 4755e61baeec1360d412:88
0
http://localhost:3000/static/js/bundle.js:35264:18
__webpack_require__
../app/webpack/bootstrap 4755e61baeec1360d412:678
./node_modules/ansi-regex/index.js.module.exports
../app/webpack/bootstrap 4755e61baeec1360d412:724
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10
Run Code Online (Sandbox Code Playgroud)

xDr*_*ing 8

请务必仔细检查您在浏览器中看到的index.html.假设您使用create-react-app这样的webpack,它可能会从内存或公共文件夹中为您提供不同的文件.

在评论和聊天中的讨论中发现了错误.

  • 是的,完全是我的错误。当使用create-react-app时,它会创建一个公共文件夹,也就是html所在的位置,我已经在src文件夹中创建了一个未加载的html ...感谢所有帮助。在公用文件夹中更改正确的index.html页时,一切正常。 (3认同)