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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47244575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:47:48  来源:igfitidea点击:

Target container is not a DOM element React.js

javascripthtmlreactjs

提问by Godspped

I have had a look at all the other posts that have had this issue, but I am still confused as to why I am running into this error. I made sure I used id in my

我已经查看了所有其他存在此问题的帖子,但我仍然对为什么会遇到此错误感到困惑。我确保我在我的

Just started playing with React, so I am sure its something quite silly.

刚开始玩 React,所以我确信它很愚蠢。

Thanks for the help in advance.

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

Code is below.

代码如下。

index.html

索引.html

<html>
    <head>
    </head>
    <body>
        <div id="testing"></div>
        <script src="index.js"></script>
    </body>
</html>

index.js

索引.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();

Full Error message:

完整的错误信息:

invariant

不变的

../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

采纳答案by xDreamCoding

Make sure to double check the index.html you are seeing in your browser. Assuming you use create-react-app an thereby webpack it might serve you a different file either from memory or from the public folder.

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

Mistake was found from discussion in comments and chat.

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

回答by Rob Johansen

You need to call React.createElement()like this:

你需要这样调用React.createElement()

ReactDOM.render(React.createElement(<App />), document.getElementById('testing'));

回答by Front-end Developer

Check in your html file if the id attribute has the same name as

如果 id 属性与

ReactDOM.render(, document.getElementById('index'));