浏览器扩展开发，基于createPortal批量渲染组件到非根节点外

公司业务包含浏览器扩展 所以需要将一些组件渲染到根节点以外便考虑使用createPortal配合webpack自动导入根节点以外得模块

目录结构

根节点外的组件

import ReactDOM from "react-dom"
import { useElement } from "@/hooks/utils"
export default function ListView() {
    const container = useElement('div', 'otherDom', (container: any) => { document.body.appendChild(container) })
    return (
        <>{ReactDOM.createPortal(
        <div >
            <h2>Invoice</h2>
           </div>, container)
        }</>
    )
}

index.ts

//通过webpack自动导入modules下的组件
const modulesFiles = require.context('./modules', true, /\.tsx$/)
let portalModules = {}
modulesFiles.keys().map(modulePath => {
    const value = modulesFiles(modulePath)
    let Modules = value.default
    portalModules = { ...portalModules, Modules }
})
export default portalModules

modules.tsx

// 统一渲染modules下的组件
import portalModules from "."
let tsx: any[] = []
for (const key in portalModules) {
    if (Object.prototype.hasOwnProperty.call(portalModules, key)) {
        const element = portalModules[key];
        tsx.push(element)
    }
}
export default function ModulesTsx() {
    return (
        <div>{tsx.map((Item, index) => <Item key={index} />)}</div>
    )
}

App.tsx

import {  useRoutes } from "react-router-dom";
import { ConfigProvider } from 'antd';
import { routes, } from './route';
import transformRoutes from './route/router';
import ModulesTsx from "@/module/modules"

function App() {
  const elements = useRoutes(transformRoutes(routes))
  return (
    <>
      <ConfigProvider locale={locale}>
        {elements}//路由页面
        <ModulesTsx/> //非根节点组件
      </ConfigProvider>
    </>

  );
}
export default App;