Question

我正在尝试将第二个React组件加载到HTML页面中，但出现以下错误：

Uncaught Error: Target container is not a DOM element.

我尝试了其他解决方案，但没有成功。我从create-react-app开始，我的工作方式与第一个组件相同，因为它可以正确加载，但第二个组件却不能。

根文件：

SRC文件：

我的LiteInfo.js文件：

import React from 'react';

const LiteInfo = function() {
  return (
    <div className="LiteInfo">
      <h1>Hello</h1>;
    </div>
  );
}

export default LiteInfo;

，并且我试图以与 index.js 文件中的App.js相同的方式加载它：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import LiteInfo from './LiteInfo';
import 'bootstrap/dist/css/bootstrap.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
console.log(document.getElementById('root'));
ReactDOM.render(<LiteInfo />, document.getElementById('liteInfo'));
console.log(LiteInfo);
registerServiceWorker();

使用console.log显示信息，但错误来自ReactDOM.render(<LiteInfo />, document.getElementById('liteIndo'));

最后是我的 HTML 文件，该文件在公共位置找到）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">

  <title>React App</title>

</head>

<body>

  <div id="navbar"></div>
  <div id="liteInfo"></div>
  <div id="root">

  </div>


</body>

</html>

有人知道我在做什么错吗？

编辑

反应未捕获的错误：目标容器不是页面渲染上的DOM元素

0 个答案: