很简单的问题。我如何在solid-js中对窗口大小的变化做出React?我需要用document.body.clientWidth做一些计算,但是当它改变时,我不能重新执行任何东西。我试过使用on()、备忘录、* 不是 * 备忘录的函数,以及直接的值。没有任何效果。一定有一些简单的东西我错过了。
document.body.clientWidth
on()
a8jjtwal1#
固体元件只能对信号变化做出React,React仅限于跟踪范围,这意味着您无法检测createComputed或其变体之外的变化。现在来回答你的问题,你试图对solid领域之外发生的变化做出React,solid是一个独立存在并发生变化的外部对象,所以你需要在这个对象上设置一个监听器,在你的例子中,resize事件是在window对象上,并且每当你收到一个resize事件时更新你的信号:
createComputed
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
mzmfm0qo2#
试试这个
addEventListener("resize", (event) => {}); onresize = (event) => {};
并且可以使用addEventListener()方法设置事件处理程序:
window.addEventListener("resize", reportWindowSize);
2条答案
按热度按时间a8jjtwal1#
固体元件只能对信号变化做出React,React仅限于跟踪范围,这意味着您无法检测
createComputed
或其变体之外的变化。现在来回答你的问题,你试图对solid领域之外发生的变化做出React,solid是一个独立存在并发生变化的外部对象,所以你需要在这个对象上设置一个监听器,在你的例子中,
resize
事件是在window对象上,并且每当你收到一个resize事件时更新你的信号:在这里,我们在组件挂载时设置了侦听器,在组件卸载时进行了清理。
您可以在这里找到一个实时演示。尝试调整输出帧的大小:https://playground.solidjs.com/anonymous/66ab1288-732e-4847-a0a4-86b8d24af55e
mzmfm0qo2#
试试这个
并且可以使用addEventListener()方法设置事件处理程序: