React-Bootstrap OverlayTrigger 组件

React-Bootstrap 是一个前端框架，旨在牢记反应。 OverlayTrigger 组件有助于将常见用例添加到我们的Overlay 组件中。它定位在我们的覆盖组件的 ref 和 style prop 的帮助下。我们可以在 ReactJS 中使用以下方法来使用 react-bootstrap OverlayTrigger 组件。

OverlayTrigger 道具：

children：用于表示overlay的children属性。
defaultShow：用于指示叠加层的初始可见状态。
delay：用于指示叠加层被触发后显示和隐藏的延迟时间。
翻转：用于指示叠加层的初始翻转状态。
onHide：用于指示叠加层的隐藏属性。
onToggle：当用户改变tooltip的可见性时触发的回调函数。
覆盖：它是目标旁边的文本或元素覆盖。
放置：用于设置叠加层的定位方向。
popperConfig：它是Popper.js的配置对象，传递给 popper 的底层实例。
show：表示叠加层的可见性。
target：当需要为叠加层设置目标时使用的目标属性。
trigger：用于指定哪些动作触发动作或覆盖可见性。

叠加道具：

children：用于表示overlay的children属性。
容器：它基本上是一个组件实例或返回一个 DOM 节点的函数。
onEnter：是一个回调函数，在overlay过渡进入之前触发。
onEntered：是一个回调函数，在overlay过渡完成后触发。
onEntering：这是一个回调函数，当叠加层开始过渡时触发。
onExit：这是一个回调函数，在覆盖过渡之前触发。
onExited：是一个回调函数，在overlay过渡结束后触发。
onExiting：这是一个回调函数，当叠加层开始过渡时触发。
onHide：用于指示叠加层的隐藏属性。
放置：用于设置叠加层的定位方向。
popperConfig：它是Popper.js的配置对象，传递给 popper 的底层实例。
rootClose：用于指定用户在覆盖层外点击时是否调用onHide函数。
rootCloseEvent：用于在组件外部触发事件时关闭组件。
show：表示叠加层的可见性。
target：当需要为叠加层设置目标时使用的目标属性。
transition：用于Overlay进出的动画。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install react-bootstrap 
npm install bootstrap
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover'
import Button from 'react-bootstrap/Button';
  
export default function App() {
  return (
    
      React-Bootstrap OverlayTrigger Component
      
            
             Hello User
            
          
        )}>
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://react-bootstrap.github.io/components/overlays/#overlay-trigger-props