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

【问题标题】：Target container is not a DOM element React.js目标容器不是 DOM 元素 React.js
【发布时间】：2018-04-24 23:15:40
【问题描述】：

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

中使用了 id

刚开始玩 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();

完整的错误信息：

不变

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

【问题讨论】：

请发布整个错误信息。
如果您使用的是 create-react-app 样板，请尝试从 index.html 中删除 <script src="index.js"></script>。
是的，我试过了，但没有帮助，因为我看到其他人没有它，是的，我使用了 create-react-app 样板。如果我将“测试”更改为“根”，它可以工作，但我不知道为什么调整为任何其他名称会有所不同。
确保您在浏览器中看到的 html 是正确的 index.html。 Webpack 可能会从缓存中提供另一个服务。
我刚刚在隐身模式下打开了一个新的谷歌浏览器，看看缓存是否会成为问题，但仍然看到同样的问题。我必须在 js 文件的某处添加 index.html 吗？还是相同的名称表示已加载？

标签： javascript html reactjs

【解决方案1】：

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

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

【讨论】：

是的，完全是我的错误。使用 create-react-app 时，它会创建一个公用文件夹，这就是 html 所在的位置，我在 src 文件夹中创建了一个未加载的 html ......感谢所有帮助。在公用文件夹中更改正确的 index.html 页面时，一切正常。
在我的情况下，我有双重 ... 块由复制和过去生成。删除坏块后错误解决！！！谢谢！

【解决方案2】：

您需要像这样拨打React.createElement()：

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

【讨论】：

ReactDOM.render( <App />, document.getElementById('root') ); 来自官方 React 文档。所以我怀疑。编辑：好吧，他没有使用 jsx，所以你可能仍然有一点，对不起。
目标容器不是 DOM 元素。 ▶ 3 个堆栈帧被折叠。 ./src/index.js ../app/src/index.js:6 3 |导入'./index.css'； 4 |从'./App'导入应用程序； 5 | > 6 | ReactDOM.render(React.createElement(), document.getElementById('testing'));

【解决方案3】：

如果 id 属性与您的 html 文件具有相同的名称，请检查您的 html 文件

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

【讨论】：