javascript 如何对SolidJS中窗口大小的变化做出React?

hpxqektj  于 2023-01-04  发布在  Java
关注(0)|答案(2)|浏览(123)

很简单的问题。我如何在solid-js中对窗口大小的变化做出React?我需要用document.body.clientWidth做一些计算,但是当它改变时,我不能重新执行任何东西。我试过使用on()、备忘录、* 不是 * 备忘录的函数,以及直接的值。没有任何效果。一定有一些简单的东西我错过了。

a8jjtwal

a8jjtwal1#

固体元件只能对信号变化做出React,React仅限于跟踪范围,这意味着您无法检测createComputed或其变体之外的变化。
现在来回答你的问题,你试图对solid领域之外发生的变化做出React,solid是一个独立存在并发生变化的外部对象,所以你需要在这个对象上设置一个监听器,在你的例子中,resize事件是在window对象上,并且每当你收到一个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

mzmfm0qo

mzmfm0qo2#

试试这个

addEventListener("resize", (event) => {});

onresize = (event) => {};

并且可以使用addEventListener()方法设置事件处理程序:

window.addEventListener("resize", reportWindowSize);

相关问题