我想做的是:
我使用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引起的。
1条答案
按热度按时间zc0qhyus1#
为了解决这个问题,我创建了另一个组件,使用
dynamic
函数强制CustomTitleBar
的CSR。