React MUI Popper Util

MUI或Material-UI是一个UI库，为React提供了预定义的强大和可自定义的组件，以便更容易地进行Web开发。MUI设计基于Google的Material Design。

在本文中，我们将讨论React MUI Popper。 Popper为元素提供了额外的上下文，每当点击或悬停在元素上时，都会以弹出窗口的形式显示。

导入Popper：

import Popper from '@mui/material/Popper'
// or
import { Popper } from '@mui/material'

React MUI Popper Props：

open： 它是一个布尔值，确定弹出框是否应该打开。
anchorEl： 它是一个函数或一个元素，确定元素的位置。
children： 它指的是弹出框的渲染函数或节点。
components： 用于根节点的组件。可以是一个字符串表示HTML元素或组件。
componentsProps： 用于每个插槽的props。
container： 它是一个函数或一个元素，将在其中附加Portal的子节点。
disablePortal： 它是一个布尔值，确定子元素是否在父组件的DOM层次结构下。默认为false。
keepMounted： 它是一个布尔值，确定是否在DOM中保留子元素。默认为false。
modifiers： 它是一个帮助计算位置的函数。
placement： 它确定了弹出框的位置。
popperOptions： 弹出框组件的不同选项。
popperRef： 引用已使用的弹出框。
slotProps： 用于Popper内每个插槽的props。
slots： 用于Popper内每个插槽的组件或HTML元素的字符串。
sx： 用于覆盖和添加样式的属性。
transition： 它是一个布尔值，确定是否应该有过渡效果。默认为false。

语法：

<Popper ></Popper>

创建React应用和安装模块：

步骤1： 使用以下命令创建React应用：

npx create-react-app foldername

步骤2： 在创建你的项目文件夹，即文件夹名称之后，使用以下命令将其移动到该文件夹中：

cd foldername

步骤3： 在创建了ReactJS应用程序之后，使用以下命令安装所需的模块：

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

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

React MUI Popper Util

示例1： 我们正在使用React钩子useState创建一个名为open的状态。我们正在创建一个名为handleOnMouseOver的onMouseover函数，它会改变状态。我们正在添加popper元素和一个按钮，当点击时会触发handleOnMouseOver函数。

App.js

import { Popper } from '@mui/material'; 
  
import React from 'react'; 
  
export default function App() { 
    const [anchorEl, setAnchorEl] = React.useState(null); 
    const open = Boolean(anchorEl); 
    const handleOnMouseOver = (e) => { 
        setAnchorEl(anchorEl ? null : e.currentTarget) 
    } 
    return ( 
        <div style={{ display: 'block', padding: 30 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h4>React MUI Popper Util </h4> 
  
  
            <button type="button" 
                onMouseOver={handleOnMouseOver}> 
                click me 
            </button> 
  
  
            <Popper 
                open={open} 
                anchorEl={anchorEl} 
                placement='bottom-start'
  
            > 
  
                <h3 style={{ color: "red" }}>Welcome User!</h3> 
                <p>placement: bottom-start</p> 
            </Popper> 
        </div> 
    ); 
}

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

npm start

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

React MUI Popper Util

示例2： 在这个示例中，我们使用react hook useState创建了一个名为anchorEl的状态。然后，我们把布尔值传递给open。我们添加了一个名为handleClick的函数来改变状态。对于Popper组件，我们传递了open、anchorEl和placement属性。

App.js

import { Popper } from '@mui/material'; 
  
import React from 'react'; 
  
function App() { 
    const [anchorEl, setAnchorEl] = React.useState(null); 
    const open = Boolean(anchorEl); 
    const handleClick = (e) => { 
        setAnchorEl(anchorEl ? null : e.currentTarget) 
    } 
    return ( 
        <div style={{ display: 'block', padding: 30 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h4>React MUI Popper Util </h4> 
  
            <button type="button" onClick={handleClick}> 
                click me 
            </button> 
  
            <Popper 
                open={open} 
                anchorEl={anchorEl} 
                placement='bottom-start'
  
            > 
                <h3 style={{ color: "red" }}>Welcome User!</h3> 
                <p>placement: bottom-start</p> 
            </Popper> 
        </div> 
    ); 
} 
export default App;

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