在Web开发中，全屏功能是一个常见的需求，它可以让用户更好地观看视频或者进行阅读。在React框架下，我们可以通过编写自定义的视频全屏按钮来实现这一功能。

我们需要了解的是全屏API。HTML5为我们提供了一组全屏的API，包括`element.requestFullscreen()`、`document.exitFullscreen()`和`document.fullscreenElement`。`element.requestFullscreen()`方法用于将页面或者某个元素设置为全屏模式；`document.exitFullscreen()`方法则用于退出全屏模式；`document.fullscreenElement`属性返回当前处于全屏状态的元素。

接下来我们可以创建一个React组件，该组件包含一个视频元素和一个用于触发全屏功能的按钮。当用户点击这个按钮时，我们将使用全屏API来切换视频的全屏状态。

以下是一个简单的例子：

```jsx

import React, { useEffect } from 'react';

const VideoPlayer = () => {

 const videoRef = React.useRef();

 let isFullScreen = false;

 const toggleFullScreen = () => {

   if (!isFullScreen) {

     if (videoRef.current) {

       if (videoRef.current.requestFullscreen) {

         videoRef.current.requestFullscreen();

       } else if (videoRef.current.mozRequestFullScreen) { /* Firefox */

         videoRef.current.mozRequestFullScreen();

       } else if (videoRef.current.webkitRequestFullscreen) { /* Chrome, Safari and Opera */

         videoRef.current.webkitRequestFullscreen();

       } else if (videoRef.current.msRequestFullscreen) { /* IE/Edge */

         videoRef.current.msRequestFullscreen();

       }

     }

   } else {

     if (document.exitFullscreen) {

       document.exitFullscreen();

     } else if (document.mozCancelFullScreen) { /* Firefox */

       document.mozCancelFullScreen();

     } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */

       document.webkitExitFullscreen();

     } else if (document.msExitFullscreen) { /* IE/Edge */

       document.msExitFullscreen();

     }

   }

   isFullScreen = !isFullScreen;

 };

 return (

       Your browser does not support the video tag.

     {isFullScreen ? 'Exit Full Screen' : 'Full Screen'}

 );

};

export default VideoPlayer;

```

在这个例子中，我们首先创建了一个`VideoPlayer`组件。这个组件包含一个视频元素和一个按钮。我们使用`React.useRef()`来获取视频元素的引用，这样我们就可以在事件处理函数中操作它。

然后我们定义了一个`toggleFullScreen`函数，这个函数会根据当前的全屏状态来切换视频的全屏状态。我们使用了全屏API的方法，如`requestFullscreen()`、`mozRequestFullScreen()`等，以兼容不同的浏览器。

我们在返回的JSX中使用了`onClick`属性来绑定`toggleFullScreen`函数，这样当用户点击按钮时，就会触发全屏状态的切换。同时我们也根据`isFullScreen`变量来动态改变按钮的文本，以提供更好的用户体验。

以上就是如何在React中实现自定义视频全屏按钮的全部内容，希望对你有所帮助。