React JS获取屏幕大小

在React JS中获取屏幕大小可以使用window.innerWidth和window.innerHeight。这两个属性返回屏幕的宽度和高度。

代码示例

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

function App() {
  const [screenWidth, setScreenWidth] = useState();
  const [screenHeight, setScreenHeight] = useState();

  useEffect(() => {
    const updateScreenSize = () => {
      setScreenWidth(window.innerWidth);
      setScreenHeight(window.innerHeight);
    };

    window.addEventListener('resize', updateScreenSize);

    updateScreenSize();

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

  return (
    <>
      <h1>屏幕大小</h1>
      <p>宽度: {screenWidth}px</p>
      <p>高度: {screenHeight}px</p>
    </>
  );
}

export default App;

这个例子演示了如何在React中使用useStateReact钩子来跟踪屏幕大小的变化。 useEffect钩子用于在组件挂载时添加事件监听器（resize），并在组件卸载时删除它。在每次渲染时，屏幕大小都会更新，因为updateScreenSize函数是通过useState钩子跟踪的。

结论

在React中使用window.innerWidth和window.innerHeight很容易获取屏幕大小，可使用useState和useEffect钩子跟踪它的变化，并在组件挂载和卸载期间添加和删除事件监听器。