正文

学会React中轻松获取窗口宽度：5种实用函数示例详解

/0 浏览量
0520

在React开发中，获取窗口的宽度是一个常见的需求，无论是为了实现响应式设计，还是为了根据窗口大小调整组件的布局。以下是一些在React中获取窗口宽度的实用函数示例，帮助你轻松实现这一功能。

1. 使用window.innerWidth

最直接的方法是使用window.innerWidth属性，它可以直接返回当前窗口的内部宽度。

function getWidth() {
  return window.innerWidth;
}

const App = () => {
  const width = getWidth();
  return <div>当前窗口宽度：{width}px</div>;
};

2. 使用useState和useEffect

如果你需要在组件中持续监听窗口大小的变化，可以使用useState和useEffect组合。

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

function App() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

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

  return <div>当前窗口宽度：{width}px</div>;
}

3. 使用useRef

使用useRef可以创建一个引用，该引用在组件的整个生命周期内保持不变。你可以用它来存储窗口的宽度。

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

function App() {
  const widthRef = useRef(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      widthRef.current = window.innerWidth;
    };

    window.addEventListener('resize', handleResize);

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

  return <div>当前窗口宽度：{widthRef.current}px</div>;
}

4. 使用react-window库

如果你正在使用react-window或react-virtualized这样的库来渲染长列表，它们提供了内置的响应式窗口尺寸监听功能。

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Item {index}</div>
);

const App = () => {
  const width = useWindowSize();

  return (
    <List
      height={500}
      itemCount={100}
      itemSize={35}
      width={width}
    >
      {Row}
    </List>
  );
};

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

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

  return size;
}

5. 使用CSS变量

如果你只是想根据窗口宽度改变样式，可以使用CSS变量和媒体查询来简化这个过程。

:root {
  --window-width: 100%;
}

@media (max-width: 600px) {
  :root {
    --window-width: 50%;
  }
}

function App() {
  const style = {
    width: `var(--window-width)`,
    height: '100px',
    backgroundColor: 'blue',
  };

  return <div style={style}>响应式宽度</div>;
}

通过以上五种方法，你可以在React中轻松获取并利用窗口宽度。根据你的具体需求，选择最适合你的方法。

-- 展开阅读全文 --