React Suite Popover PropsWhisper方法

React Suite是一个用于创建React组件的React库，具有直观的设计和用户友好的体验。它适用于中间平台和后端产品，支持服务器端渲染。React Suite支持包括Chrome、Mozilla Firefox、Safari和Microsoft Edge在内的所有主要网络浏览器。

Popover 组件用于在鼠标点击或悬停在弹出框上时显示更多内容。

PropsWhisper方法

这些Whisper方法包括：

open： 打开与Whisper组件关联的覆盖层（例如Popover）。
close： 关闭与Whisper组件关联的覆盖层。
updatePosition： 在Whisper组件内更新覆盖层的位置。当用户想要手动更新覆盖层的位置时，这非常有用，例如当覆盖层的内容动态变化时，您希望更改其位置。

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

步骤1： 创建一个React应用程序。

通过运行以下命令创建一个React应用程序：

npm create vite@latest <projectname>

上述命令创建了一个React-vite应用程序。我更喜欢Vite而不是create-react-app，因为它具有更快的运行时间。

步骤2：进入项目目录。

通过运行以下命令切换到项目文件夹：

cd  <projectname>

步骤3：安装必需的模块

运行下面的命令来创建一个node_modules目录，该目录将保存项目所依赖的所有必需库和包：

npm install

第四步： 在编辑器上打开你的项目

在终端或命令提示符中设置好你的项目后，现在你可以打开你的项目在编辑器上。让我们使用 VS Code。 在终端/命令提示符上运行以下命令：

code .

这将在VS code上打开你的项目。

项目结构

React Suite Popover PropsWhisper方法

步骤5：运行我们的项目

通过在终端或命令提示符上使用以下命令来运行项目。这应该是在您的根目录下。

 npm run dev

该项目现在可在 http://localhost:5173 上可见

示例1： 打开App.jsx，删除内部的模板代码并添加以下代码：

import "rsuite/dist/rsuite.min.css"; 
import { useRef } from "react"; 
import { Button, Popover, Whisper } from "rsuite"; 
  
export default function App() { 
    const whisperRef = useRef(null); 
    const handleclick = () => { 
        whisperRef.current.open(); 
        setTimeout(() => { 
            whisperRef.current.close(); 
        }, 3000); 
        setTimeout(() => { 
            whisperRef.current.open(); 
        }, 5000); 
    }; 
    const style = { 
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center", 
        justifyContent: "center", 
        minHeight: "100vh", 
        justifyItems: "center", 
    }; 
    return ( 
        <div style={style}> 
            <h1 style={{ color: "green", font: "bold" }}> 
                Geeks For Geeks 
            </h1> 
            <h3 style={{ font: "bold" }}> 
                React Suite Popover PropsWhisper methods 
            </h3> 
            <Whisper 
                ref={whisperRef} 
                trigger="click"
                placement="bottom"
                speaker={ 
                    <Popover title="Title"> 
                        <h5> 
                            This is a sample Popover to show 
                            how methods are used. 
                        </h5> 
                        <p> 
                            You can add the rest of the 
                            content below 
                        </p> 
                    </Popover> 
                } 
            > 
                <Button 
                    appearance="subtle"
                    style={{ 
                        backgroundColor: "#ff4820", 
                        color: "white", 
                    }} 
                    onClick={handleclick} 
                > 
                    Click Here 
                </Button> 
            </Whisper> 
            <br /> 
            <hr /> 
        </div> 
    ); 
}

解释：

上述代码创建了一个包含Popover覆盖层的Whisper组件。
handleClick函数使用 open() 和 close() 方法，在 3秒和 5秒后分别打开和关闭覆盖层。

下面是输出结果：

React Suite Popover PropsWhisper方法

示例2。 在Dropdown叠加层中使用close()方法

在这个示例中，我们将实现close()方法，在Dropdown叠加层上使用

import { Button, Whisper, Dropdown, Popover } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
import { useRef } from "react"; 
  
const App = () => { 
    const whisperRef = useRef(null); 
    const handleclick = () => { 
        setTimeout(() => { 
            whisperRef.current.close(); 
        }, 4000); 
    }; 
    const styles = { 
        display: "flex", 
        flexDirection: "column", 
        margin: "auto", 
        alignItems: "center", 
        paddingTop: "100px", 
        minHeight: "100vh", 
    }; 
    return ( 
        <div style={styles}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
            <h4>React Suite Popover Component</h4> <br /> 
            <Whisper 
                ref={whisperRef} 
                trigger="click"
                placement="bottom"
                speaker={ 
                    <Popover title="What is your Best Stack?"> 
                        <Dropdown.Menu> 
                            <Dropdown.Item> 
                                JavaScript 
                            </Dropdown.Item> 
                            <Dropdown.Item> 
                                Python 
                            </Dropdown.Item> 
                            <Dropdown.Item> 
                                Java 
                            </Dropdown.Item> 
                            <Dropdown.Item> 
                                Go 
                            </Dropdown.Item> 
                        </Dropdown.Menu> 
                    </Popover> 
                } 
            > 
                <Button 
                    appearance="subtle"
                    style={{ 
                        backgroundColor: "#ff4820", 
                        color: "white", 
                    }} 
                    onClick={handleclick} 
                > 
                    Click 
                </Button> 
            </Whisper> 
        </div> 
    ); 
}; 
export default App;

输出：

React Suite Popover PropsWhisper方法

示例3： 使用updatePosition方法。

import { Button, Popover, Whisper } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
import { useRef } from "react"; 
  
const App = () => { 
    const whisperRef = useRef(null); 
    const handleClick = () => { 
        whisperRef.current.open(); 
        whisperRef.current.updatePosition(); 
    }; 
    const styles = { 
        display: "flex", 
        flexDirection: "column", 
        margin: "auto", 
        alignItems: "center", 
        paddingTop: "100px", 
        minHeight: "100vh", 
    }; 
    return ( 
        <div style={styles}> 
            <h1 style={{ color: "green" }}> 
                Geeks For Geeks 
            </h1> 
            <h4>UpdatePosition</h4> 
            <Whisper 
                ref={whisperRef} 
                trigger="hover"
                placement="bottom"
                speaker={ 
                    <Popover title="Sample"> 
                        <h3>Sample Popover</h3> 
                        <p>Rest of the content </p> 
                    </Popover> 
                } 
            > 
                <Button 
                    appearance="subtle"
                    onClick={handleClick} 
                    style={{ 
                        backgroundColor: "#ff4820", 
                        color: "white", 
                    }} 
                > 
                    See Popover 
                </Button> 
            </Whisper> 
        </div> 
    ); 
}; 
export default App;

输出:

React Suite Popover PropsWhisper方法