有了React，这是可能的。有了更多的细节，我可以帮你更多一点。但总的来说，这是实现这一目标的方法。
对于您的小部件，使用唯一的id回显一个div。每个例子：

<div id="myReactWidget"></div>

在Reaction中，您通常会看到以下内容来呈现应用程序：

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {   
  render() {
    return (
      <div>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

如果您将“ROOT”替换为“myReactWidget”，它将呈现在您的Elementor小部件中。
示例：
这一点：

render(<App />, document.getElementById('root'));

替换为：

render(<App />, document.getElementById('myReactWidget'));

请注意，您必须将您的构建reactjs脚本“入队”才能正常工作

为此，请在您的项目根目录中运行：

npm run build

并查看*/Build*文件夹以查看要包括的内容

有几个问题需要解决才能有效地工作，比如Elementor小部件之间的状态管理，React应用程序和Elementor之间的CSS隔离，以及如何管理这两者之间的道具……我试图通过NX插件为这些问题提供答案
https://www.npmjs.com/package/@betrue/react-elementor
基于NX工作区模式，他们将生成由影子DOM分隔的Web组件标签 Package 的react.js组件，使用redux共享状态。
该插件将生成一个起始代码库来回答大多数问题。

事实上，@jbergeron提出的解决方案实际上是有效的。但你已经走到一半了。如果您正在尝试渲染，假设在另一个应用程序/html_page中使用其自己的主题/样式设置等的Reaction应用程序，在那里使用该应用程序可能会导致样式问题。有一种解决方案可以隔离Reaction应用程序，这样它就不会干扰页面的其余部分，在您的情况下是Elementor。
对你来说，关键的短语是，影子DOM和Web组件。
你可以跟随this guide来准备对此做出React。
它非常通用，您还可以将其与MUI等库结合使用