如何让一个React组件占据整个屏幕(在所有设备上)，直到您向下滚动？

.my-component {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

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

  handleResize = () => {
    const component = document.querySelector('.my-component');
    component.style.height = `${window.innerHeight}px`;
    component.style.width = `${window.innerWidth}px`;
  }

  render() {
    return (
      <div className="my-component">
        {/* 组件内容 */}
      </div>
    );
  }
}

export default MyComponent;