目标容器不是DOM元素React.js [英] Target container is not a DOM element React.js

查看:867
本文介绍了目标容器不是DOM元素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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆