从服务器获取 React 组件

Question

我正在为 ReactJs 工作。 我在客户端和服务器端都使用了 Typescript 进行开发。 我使用npm run build来构建我的项目，我现在将只交付构建文件夹。

客户：

Client
       build
         -static
         -index.html
Server
      node_modules
      src
      package.json
      package-lock.json
      tsconfig.json             

一切都是文件，在少数情况下，我需要从服务器获取 ReactjsComponents。 这些新组件由每个用户创建。

全新 ReactJs

ButtonList
      ButtonListComponent.tsx
      index.ts
      IProps.ts

我使用 babel 将.tsx 文件转换为.js

ButtonList
      ButtonListComponent.d.ts
      ButtonListComponent.js
      index.d.ts
      index.js
      IProps.d.ts
      IProps.js

在服务器中，我渲染为普通的 html 并将 html 作为字符串发送到客户端并打印。

ReactHelper.ts

import React from 'react'
import * as  ReactDOMServer from 'react-dom/server'
import ButtonList from '../../NewComponents/ButtonList'

export function ExportReactComponent(){
    var reactHtml = ReactDOMServer.renderToStaticMarkup(ButtonList);
    return reactHtml
}

但是我使用了功能组件和materialUI，这些钩子不起作用。 所以不要创建 reactComponents 并转换为 js。 我写了普通的 html 并发送给客户进行打印。 但在这种情况下，脚本不起作用。

ReactHelper.ts

export function ExportReactComponent(){
    var htmlInput = `<h1>The script element</h1>
        <p id="demo"></p>
        <script>
            document.getElementById("demo").innerHTML = "Hello JavaScript!";
        </script> 
    `;
    return htmlInput
}

有人帮助我，如果尝试了这些事情但没有按预期工作，还有其他好的解决方案吗？ 提前致谢。

Git 回购： https://github.com/nivedhauswin/ReactApp.git

我使用 Iframe 来显示用户组件。 我想跟踪 Iframe contentWindow.location.href中的位置变化，但我得到了

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.