正文

React获取屏幕宽度的示例代码

/0 浏览量
0520

在React中，获取屏幕宽度是一个常见的需求，无论是为了响应式设计还是为了实现特定的功能。以下是一些获取屏幕宽度的示例代码，这些代码可以帮助你根据不同的场景来获取屏幕宽度。

方法一：使用window.innerWidth

最直接的方法是使用window.innerWidth来获取当前屏幕的宽度。这种方法简单直接，适用于大多数场景。

function getWidth() {
  return window.innerWidth;
}

// 使用示例
const screenWidth = getWidth();
console.log('当前屏幕宽度：', screenWidth, 'px');

方法二：使用React的生命周期方法

如果你需要在组件渲染时获取屏幕宽度，可以使用React的生命周期方法componentDidMount。

import React, { Component } from 'react';

class ScreenWidthComponent extends Component {
  componentDidMount() {
    const screenWidth = window.innerWidth;
    console.log('组件加载时屏幕宽度：', screenWidth, 'px');
  }

  render() {
    return <div>屏幕宽度将在组件加载时打印到控制台</div>;
  }
}

export default ScreenWidthComponent;

方法三：使用React Hooks

如果你使用的是函数组件，可以使用useEffect和useState来获取屏幕宽度。

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

function ScreenWidthComponent() {
  const [screenWidth, setScreenWidth] = useState(window.innerWidth);

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

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      当前屏幕宽度：{screenWidth} px
    </div>
  );
}

export default ScreenWidthComponent;

方法四：使用CSS变量

如果你想在CSS中使用屏幕宽度，可以使用CSS变量来动态设置。

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

@media (max-width: 600px) {
  :root {
    --screen-width: 100vw;
  }
}

然后在React组件中使用这个变量：

const style = {
  width: `var(--screen-width)`
};

return <div style={style}>这是根据屏幕宽度设置的宽度</div>;

这些示例展示了如何在React中获取屏幕宽度，你可以根据实际需求选择合适的方法。希望这些代码能够帮助你解决问题！

-- 展开阅读全文 --