Reactjs 需要在窗口调整大小时更新 React 组件

发布于02月04日

我试图访问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' ? ... : ....
  })

}

然而，当我使用开发工具调整网页大小时，它不起作用.有谁能给我个提示吗？谢谢.`

推荐答案

更改窗口宽度不会导致Reaction对更改做出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>