electron NextJS + Tauri中未定义窗口

o2gm4chl  于 2022-12-25  发布在  Electron
关注(0)|答案(1)|浏览(219)

我想做的是:

我使用Tauri的appWindow访问appWindow.minimize()appWindow.toggleMaximize()appWindow.close()来创建自定义标题栏。

代码的外观:

import { appWindow } from "@tauri-apps/api/window";

const CustomTitleBar = () => {
  const hasLoaded = hasLoadedCSR(); // custom hook for checking if component has mounted using useEffect

  if (typeof window === "undefined") return <></>; // 1st attempt to disable SSR for this component
  if (!hasLoaded) return <></>; // 2nd attempt to disable SSR for this component
  return (
    <>
      <div data-tauri-drag-region className="titlebar">
        <button
          className="titlebar-button"
          id="titlebar-minimize"
          onClick={() => {
            console.log("Clicked");
            appWindow.minimize();
          }}
        >
          <img
            src="https://api.iconify.design/mdi:window-minimize.svg"
            alt="minimize"
          />
        </button>
        <button
          className="titlebar-button"
          id="titlebar-maximize"
          onClick={() => appWindow.toggleMaximize()}
        >
          <img
            src="https://api.iconify.design/mdi:window-maximize.svg"
            alt="maximize"
          />
        </button>
        <button className="titlebar-button" id="titlebar-close">
          <img
            src="https://api.iconify.design/mdi:close.svg"
            alt="close"
            onClick={() => appWindow.close()}
          />
        </button>
      </div>
    </>
  );
};

export default CustomTitleBar;

我基本上做了2次尝试来解决这个问题,因为我肯定这是由FabianLars在类似的问题中提到的SSR引起的。

zc0qhyus

zc0qhyus1#

为了解决这个问题,我创建了另一个组件,使用dynamic函数强制CustomTitleBar的CSR。

import dynamic from "next/dynamic";

const DynamicCustomTitleBar = dynamic(() => import("./CustomTitleBar"), {
  ssr: false,
});

export default DynamicCustomTitleBar;

相关问题