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

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

javascript html reactjs

Javascript 目标容器不是DOM元素React.js,javascript,html,reactjs,Javascript,Html,Reactjs,我已经看过了所有其他有这个问题的帖子，但是我仍然不明白为什么我会遇到这个错误。我确保我在工作中使用了身份证我刚开始玩React，所以我敢肯定这有点傻提前谢谢你的帮助代码如下 index.html <html> <head> </head> <body> <div id="testing"></div> <script src="index.js">&l

我已经看过了所有其他有这个问题的帖子，但是我仍然不明白为什么我会遇到这个错误。我确保我在工作中使用了身份证

我刚开始玩React，所以我敢肯定这有点傻

提前谢谢你的帮助

代码如下

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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，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 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

。/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（，document.getElementById（'testing'））；
7 | 
8 | 
9 | 
视图编译
▼ 扩展了6个堆栈框架。
__需要的网页__
../app/webpack/bootstrap 4755E61BAEEEC1360D412:678
fn
../app/webpack/bootstrap 4755E61BAEEEC1360D412:88
0
http://localhost:3000/static/js/bundle.js:35264:18
__需要的网页__
../app/webpack/bootstrap 4755E61BAEEEC1360D412:678
./node_modules/ansi regex/index.js.module.exports
../app/webpack/bootstrap 4755E61BAEEEC1360D412:724
（匿名函数）
http://localhost:3000/static/js/bundle.js:728:10

您需要像这样调用

React.createElement（）

：

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

ReactDOM.render（React.createElement（），document.getElementById（'testing'）；

确保仔细检查您在浏览器中看到的index.html。假设您使用CreateReact应用程序作为一个网页包，它可能会从内存或公用文件夹为您提供不同的文件

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

如果id属性与html文件同名，请检入html文件

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

请发布整个错误消息。如果您使用的是

create-react-app

样板文件，请尝试从index.html中删除

。是的，我尝试了，但没有帮助，因为我看到其他人没有，是的，我使用了create-react-app样板文件。如果我将“testing”更改为“root”，它会工作，但我不知道为什么调整为其他名称会产生不同。请确保您在浏览器中看到的html是正确的index.html。Webpack可能会为缓存中的另一个提供服务。我刚刚在匿名模式下打开了一个新的google chrome，看看缓存是否会成为一个问题，但仍然看到相同的问题。我必须在js文件的某个地方添加index.html吗？或者相同的名称是否表示加载了哪个？

ReactDOM.render（，document.getElementById（'root'）来自官方文件。所以我怀疑。编辑：他没有使用jsx，所以你可能在这里还有一点，抱歉。目标容器不是DOM元素。▶ 3个烟囱框架倒塌/src/index.js../app/src/index.js:6 3 | import'/index.css'；4 |从“./App”导入应用程序；5 |>6 | ReactDOM.render（React.createElement（），document.getElementById（'testing'））；是的，完全是我的错。当使用CreateReact应用程序时，它会创建一个公用文件夹，这就是html所在的位置，我在src文件夹中创建了一个html，但它没有被加载。。。谢谢你的帮助。当在公用文件夹中更改正确的index.html页面时，一切正常。。。由复制和过去生成的块。删除后坏块错误被解决！！！非常感谢。