Блог

У меня есть приложение Electron/React, которое теперь отображает все в одном окне. В своем приложении я хочу открыть некоторые внешние URL-адреса, и я подумал, что вкладки будут отличным способом сделать это. После некоторых исследований я нашел модуль electron-tabs в библиотеке NPM, который соответствует моим требованиям. Электронные вкладки отображают содержимое каждой вкладки в a 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 (
   ​<div>
     ​<div className="etabs-tabgroup">
       ​<div className="etabs-tabs" />
       ​<div className="etabs-buttons" />
     ​</div>
     ​<div className="etabs-views" />
   ​</div>
 ​);
};

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

Как я могу ввести компонент React, переданный в атрибуте src ?