如何在React html中调整屏幕大小？

@media (max-width: 768px) {
  /* 在宽度小于等于768像素的屏幕上应用的样式 */
}

@media (min-width: 768px) {
  /* 在宽度大于等于768像素的屏幕上应用的样式 */
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight
    };
  }

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

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

  handleResize = () => {
    this.setState({
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight
    });
  }

  render() {
    // 根据屏幕大小的状态渲染组件内容
    return (
      <div>
        <p>屏幕宽度：{this.state.screenWidth}px</p>
        <p>屏幕高度：{this.state.screenHeight}px</p>
      </div>
    );
  }
}