我正在尝试在pug文件中定义的DOM节点上呈现react组件

Question

背景信息

我最初的应用程序的基本结构是

main.pug

... code elements ...
<div  class = "panel">
... code elements ...

和加载在标头中的入门javascript文件，其中包含此代码块

starter.js

document.addEventListener('DOMContentLoaded', function() {
  ... logic to determine html page to show in the panel div ...
  ... it determines the name and saves it in the variable 'htmlPageToShow' ...

  $(".panel").load(htmlPageToShow);
});

starter.js中的这段代码是面板div中内容的显示方式 它确定文件名，然后将其加载到dom元素中

问题

我决定要让React处理这一部分，我的结论是将一个称为React的组件渲染到panel div中，希望在无需更改整个代码库的情况下改进这部分代码，而只需要花两天的时间。 ，而且我无法获得可在div中呈现的react组件或任何类型的html元素，类似于html页面的加载方式

我的尝试

我将main.pug文件留在了starter.js中，并这样做了：

starter.js

import react from 'react';
import ReactDom from 'react-dom';
import PanelHandler from './PanelHandler';

ReactDom.render(
  <PanelHandler/>,
  document.getElementById('panel'));

我已经尝试了多种版本，例如用$(".panel")，getElementByClassName尝试将QuerySelector替换get元素ID位，尝试使用{{ 1}}

我还尝试将整个内容放入script标记并将其附加到main.pug的末尾

在某个时候，我尝试创建一个新的html页面，并将上面的代码放在script标签中，然后使用以前的逻辑将其加载到面板中，但无济于事

我想知道我是否缺少某些东西，哈巴狗不能和React一起使用吗？我缺少依赖吗？任何帮助将不胜感激！