在 Astro 中,不能在 React 组件中直接使用 window 对象,因为在构建时 Astro 会尝试在服务器端渲染组件,而 window 对象只存在于浏览器中。但是可以使用 ReactDOM 的 useLayoutEffect 钩子来在浏览器端进行相关操作。
示例代码:
import ReactDOM from 'react-dom';
function MyComponent() {
React.useLayoutEffect(() => {
// 在挂载和更新后,使用 window 对象
window.someFunction();
return () => {
// 在组件卸载时,清理
window.cancelSomeFunction();
};
}, []);
return (
My Component
);
}
ReactDOM.render( , document.getElementById('root'));
其中,useLayoutEffect 是在 DOM 更新前同步执行的钩子,在此钩子中,可以安全地使用 window 对象进行操作。同时,第二个参数是依赖项列表,提供给 React 使用,以确保每次重新渲染组件时,useLayoutEffect 使用的 window 对象都是最新的。