如何在React应用中实现全屏功能

要在React应用中实现全屏功能，可以使用浏览器提供的Fullscreen API。以下是一种实现方式：

1. 创建一个React组件FullPage，该组件包含一个按钮，点击按钮可以切换全屏模式。

import React, { useState } from 'react';

const FullPage = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  return (
    <div>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
      </button>
    </div>
  );
};

export default FullPage;

2. 在根组件中引入FullPage组件。

import React from 'react';
import FullPage from './FullPage';

const App = () => {
  return (
    <div>
      <h1>React Fullscreen App</h1>
      <FullPage />
    </div>
  );
};

export default App;

通过以上步骤，你可以在React应用中实现全屏功能。当用户点击按钮时，页面将切换到全屏模式，再次点击按钮将退出全屏模式。