目标容器不是DOM元素React.js [英] Target container is not a DOM element React.js
问题描述
我查看了所有发生此问题的其他帖子,但我仍然对为什么遇到此错误感到困惑。我确信我在我的
中使用了id。刚刚开始使用React,所以我确信它非常愚蠢。
感谢您的帮助。
以下代码。
index.html
< html>
< head>
< / head>
< body>
< div id =testing>< / div>
< script src =index.js>< / script>
< / body>
< / html>
index.js
import从'react'反应;
从'react-dom'导入ReactDOM;
import'./index.css';
从'./App'导入应用程序;
从'./registerServiceWorker'导入registerServiceWorker;
ReactDOM.render(< App /> ;, document.getElementById('testing'));
registerServiceWorker();
完整错误信息:
不变
../ 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堆栈帧被扩大了。
./src/index.js
../app/src/index.js:6
3 |导入'./index.css';
4 |从'./App'导入应用程序;
5 |
> 6 | ReactDOM.render(< App />,document.getElementById('testing'));
7 |
8 |
9 |
查看已编译的
▼6个堆栈帧已扩展。
__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
(匿名函数)
http:// localhost:3000 / static / js / bundle.js: 728:10
确保仔细检查索引。您在浏览器中看到的html。假设你使用了create-react-app和webpack,它可能会从内存或者公共文件夹为你提供一个不同的文件。
错误来自讨论在评论和聊天中。
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.
Thanks for the help in advance.
Code is below.
index.html
<html>
<head>
</head>
<body>
<div id="testing"></div>
<script src="index.js"></script>
</body>
</html>
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();
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
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.
Mistake was found from discussion in comments and chat.
这篇关于目标容器不是DOM元素React.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!