我如何对SolidJS中窗口大小的变化做出反应?

Question

简单的问题。我如何对solid-js中窗口大小的变化做出反应?我需要对document.body.clientWidth做一些计算，但是当它改变时，我不能得到任何东西来重新执行。我尝试过使用on()，备忘录，不是备忘录的函数，以及直接的值。没有什么工作。一定有什么简单的东西我错过了。

Answer 1

固体组分只能对信号变化作出反应，并且反应仅限于跟踪范围，这意味着您无法检测到createComputed以外的变化或其变化之一。

现在来回答你的问题，你正在试图反应发生在固体领域之外的变化，一个外部物体存在并自行变化。因此，您需要在该对象上设置侦听器，在您的示例中，在窗口对象上设置resize事件，并在接收到resize事件时更新信号:

import { createSignal, onCleanup, onMount } from 'solid-js';
import { render } from 'solid-js/web';
export const App = () => {
const [rect, setRect] = createSignal({
height: window.innerHeight,
width: window.innerWidth
});
const handler = (event: Event) => {
setRect({ height: window.innerHeight, width: window.innerWidth });
};
onMount(() => {
window.addEventListener('resize', handler);
});
onCleanup(() => {
window.removeEventListener('resize', handler);
})
return (
<div>Window Dimensions: {JSON.stringify(rect())}</div>
);
};
render(() => <App />, document.body);

在这里，我们确实在组件挂载时设置了侦听器，并在组件卸载时清理了。

在这里你可以找到一个现场演示。试着调整输出帧的大小:https://playground.solidjs.com/anonymous/66ab1288-732e-4847-a0a4-86b8d24af55e

Answer 2

这个答案最初是为React发布的(在这里找到)，我只是将它应用于Solid。这样做的好处是它避免了服务器端渲染时遇到的window is not defined问题。

import { createEffect, createSignal } from "solid-js";
const useDeviceSize = () => {
const [width, setWidth] = createSignal(0)
const [height, setHeight] = createSignal(0)
const handleWindowResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
createEffect(() => {
// component is mounted and window is available
handleWindowResize();
window.addEventListener('resize', handleWindowResize);
// unsubscribe from the event on component unmount
return () => window.removeEventListener('resize', handleWindowResize);
});
return { width, height };
}
export default useDeviceSize;