如何在react中根据屏幕宽度进行条件渲染？

import React, { Component } from 'react';
import './YourComponent.css'; // 引入所需的CSS文件或样式

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screenWidth: window.innerWidth, // 获取当前屏幕宽度
    };
    this.handleResize = this.handleResize.bind(this);
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    this.setState({
      screenWidth: window.innerWidth, // 监听屏幕宽度变化
    });
  }

  render() {
    const { screenWidth } = this.state;

    // 根据屏幕宽度进行条件渲染
    if (screenWidth > 768) {
      return (
        <div className="desktop-view">Desktop View</div>
      );
    } else {
      return (
        <div className="mobile-view">Mobile View</div>
      );
    }
  }
}

export default YourComponent;