Question

我有以下useEffect

useEffect(() => {
  Draggable.create(sliderRef.current, {
    type: "x",
    bounds: {
      minX: 0,
      maxX: -document.getElementById('slider').offsetWidth + window.innerWidth
    }
  });
}, [document.getElementById('slider')])

我想在屏幕尺寸变化时触发它我试图在依赖项数组中传递参数

window.innerWidth 或 document.getElementById('root')

然而，没有成功...... 我感谢帮助

Answer 1

useEffect 需要有一个依赖项，如果您希望它重新调用您的回调，则该依赖项会发生变化，因此使用简单的 document.getElementById 不会成功。

我个人建议使用已经针对此类事件进行了优化的 [ResizeObserver][1]，


const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // ... entry has the full info about your element dimensions
     
  }
 
});

resizeObserver.observe(document.getElementById('slider'));

在 React 应用程序中，我会使用 useEffect 开始和停止观察元素大小

function App(){

  useEffect(() => {

    // start listening on app start
    resizeObserver.observe(document.getElementById('slider'));

    return () => {
          // clean 
          resizeObserver.unobserve(document.getElementById('slider'));
    }
  }, []);

}

Answer 2

您正在尝试在 React 生命周期内使用命令式 DOM 代码 - 您不能（至少不能这样）。

useEffect 依赖项只能依赖于 React 跟踪的变量：state 和 props。 React 无法知道 document.getElementById('slider') 何时发生变化。它不知道那是什么，也不知道如何检查它。依赖性更改检查代码不是在循环中运行，而是不断检查变量。它仅在此组件的 state 或 props 更改时运行。如果它们不改变，React 不会检查依赖项，也不会知道它们已经改变。

你应该管理任何需要监听窗口变化的代码，需要以旧的 vanilla JS 方式运行。

当屏幕尺寸改变时触发 useEffect

2 个答案: