正文

React全攻略：轻松掌握window CSS自定义技巧

/0 浏览量
1017

在React开发中，我们经常需要根据不同的窗口大小或设备特性来调整样式，以达到更好的用户体验。而CSS自定义技巧可以帮助我们更灵活地实现这一目标。本文将为你详细介绍如何在React中运用window CSS自定义技巧，让你轻松掌握这一技能。

1. 窗口尺寸检测

首先，我们需要检测当前窗口的尺寸。React提供了一个useEffect钩子，可以帮助我们在组件挂载和窗口尺寸变化时执行代码。结合window.innerWidth和window.innerHeight，我们可以获取当前窗口的宽度和高度。

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

function App() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

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

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      <p>Window width: {windowSize.width}</p>
      <p>Window height: {windowSize.height}</p>
    </div>
  );
}

2. 媒体查询

媒体查询是CSS中用于根据不同设备特性调整样式的一种方法。在React中，我们可以使用styled-components库来实现媒体查询。

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;

  @media (max-width: 768px) {
    background-color: #ddd;
  }
`;

在上面的代码中，当屏幕宽度小于768px时，背景颜色会变为#ddd。

3. CSS自定义属性

CSS自定义属性（也称为CSS变量）允许我们在CSS中定义变量，并在整个文档中使用这些变量。在React中，我们可以使用styled-components来实现CSS自定义属性。

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: var(--background-color);

  @media (max-width: 768px) {
    --background-color: #ddd;
  }
`;

在上面的代码中，当屏幕宽度小于768px时，背景颜色会变为#ddd。

4. CSS-in-JS

CSS-in-JS是一种将CSS样式直接编写在JavaScript中的方法。在React中，我们可以使用styled-components来实现CSS-in-JS。

import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: ${props => (props.isMobile ? '#ddd' : '#f5f5f5')};

  @media (max-width: 768px) {
    background-color: #ddd;
  }
`;

在上面的代码中，当isMobile属性为true时，背景颜色会变为#ddd。

5. 实战案例：响应式布局

以下是一个使用window CSS自定义技巧实现响应式布局的案例：

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;

  @media (max-width: 768px) {
    flex-direction: column-reverse;
  }
`;

function App() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

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

    window.addEventListener('resize', handleResize);

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

  return (
    <Container>
      <h1>Hello, World!</h1>
      <p>Window width: {windowSize.width}</p>
      <p>Window height: {windowSize.height}</p>
    </Container>
  );
}

在这个案例中，当屏幕宽度小于768px时，布局会变为垂直方向。

通过以上介绍，相信你已经掌握了React中window CSS自定义技巧。在实际开发中，灵活运用这些技巧可以帮助你实现更加优雅和高效的响应式布局。祝你在React开发中一帆风顺！

-- 展开阅读全文 --