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

新手上路,请多包涵

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

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

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

代码如下。

索引.html

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

索引.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

原文由 Godspped 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 350
2 个回答

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

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

原文由 xDreamCoding 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

原文由 Rob Johansen 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题