用React获取浏览器的宽度

首先

切换显示在平板电脑或计算机上时，需要获取宽度。以下是使用React获取宽度的方法。

成果产物

进行开发

import React, { useState, useEffect } from 'react';

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return width;
};

const App: React.FC = () => {
  const width = useWindowWidth();

  return (
    <div>
      <p>ブラウザの横幅: {width}px</p>
    </div>
  );
};

export default App;