0

我有一个 Electron/React 应用程序，它现在在一个窗口中呈现所有内容。在我的应用程序中，我想打开一些外部 URL，我认为选项卡是实现此目的的好方法。经过一番研究electron-tabs，在 NPM 库中找到了一个符合我要求的模块。Electron-tabs将每个选项卡的内容呈现在webview.

我在干净的 Electron/React 样板中对库进行了一些测试，但遇到了困难。虽然我可以使用外部 URL 打开其他选项卡，但我无法将 React 组件安装到我的第一个选项卡中，这将始终是主选项卡（我们称为固定选项卡）

这是我的代码片段示例：

const Hello = () => {
  useEffect(() => {
    const tabGroup = new TabGroup({
      newTab: {
        title: 'New Tab',
      },
    });

    tabGroup.addTab({
      title: 'Client Tab',
      src: `${(<ReactApp />)}`,
      active: true,
      visible: true,
    });

    tabGroup.addTab({
      title: 'Google',
      src: ​'https://google.com/',
     ​visible: true,
   ​});
 ​}, []);

 ​return (
   ​&lt;div>
     ​&lt;div className="etabs-tabgroup">
       ​&lt;div className="etabs-tabs" />
       ​&lt;div className="etabs-buttons" />
     ​&lt;/div>
     ​&lt;div className="etabs-views" />
   ​&lt;/div>
 ​);
};

export default function App() {
 ​return (
   ​&lt;Router>
     ​&lt;Switch>
       ​&lt;Route path="/" component={Hello} />
     ​&lt;/Switch>
   ​&lt;/Router>
 ​);
}

如何注入在属性中传递的 React 组件src？

4

0 回答 0