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

Question

简单的问题。我如何对solid-js 中窗口大小的变化做出反应？我需要使用 进行一些计算document.body.clientWidth，但是当情况发生变化时我无法重新执行任何内容。我尝试过直接使用、 备忘录、非on()备忘录函数以及值。什么都不起作用。一定有一些简单的东西我错过了。

Answer 1

固体组件只能对信号变化做出反应，并且反应仅限于跟踪范围，这意味着您无法检测由 等函数创建的计算之外的变化createComputed。createEffect

现在要回答您的问题，您正在尝试对固体领域之外发生的变化做出反应，固体领域是一个存在并自行变化的外部对象。因此，您需要在该对象上设置一个侦听器，在您的情况下是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