next.js 需要在调整窗口大小时更新React组件

j91ykkif 于 2023-02-08 发布在 React

关注(0)|答案(1)|浏览(118)

我尝试访问React.js组件内部的window对象，因为我想创建一个状态，该状态保存window对象的动态innerWidth值。当页面刷新时，我能够使其工作，但当我使用dev工具动态调整页面大小时，它不能工作。
下面是适用于刷新的代码：

const About = () => {

  const [bioType, setBioType] = useState("");

  const truncateText = () =>
    window.innerWidth > 1024 ? setBioType("desktop") : setBioType("mobile");

  useEffect(() => {
    truncateText();
  });

  return ({
    bioType === 'desktop' ? ... : ....
  })

}

但是，当我使用开发人员工具调整网页大小时，它不起作用。有人能给予我一个提示吗？谢谢。

next.js

来源：https://stackoverflow.com/questions/75340693/need-to-update-react-component-on-window-resize

1条答案

按热度按时间

rqqzpn5f1#

更改窗口宽度不会导致React对更改做出React并重新呈现。您需要使用事件处理程序来侦听resize event、使用ResizeObserver或使用MatchMedia并侦听更改。
MatchMedia示例：

const { useState, useEffect } = React;

const MIN_WIDTH = 600;

const getBioType = matches => matches ? 'desktop' : 'mobile';

const About = () => {
  const [bioType, setBioType] = useState(() => getBioType(window.innerWidth > MIN_WIDTH));

  useEffect(() => {
    const mql = window.matchMedia(`(min-width: ${MIN_WIDTH}px)`);
    
    const handler = e => setBioType(getBioType(e.matches));
    
    mql.addEventListener('change', handler);
    
    return () => {
      mql.removeEventListener('change', handler);
    };
  }, []);

  return bioType;
}

ReactDOM
  .createRoot(root)
  .render(<About />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

赞(0）回复(0）举报 2023-02-08

我来回答

next.js 需要在调整窗口大小时更新React组件

1条答案

相关问题

热门标签

最新问答