React.js蓝图ContextMenu2高级用法

Blueprint是一种基于React的用于Web的UI工具包。该库非常优化和流行，用于构建复杂且数据密集的桌面应用程序界面。

在本文中，我们将讨论React.js蓝图ContextMenu2的高级用法。上下文菜单在右键单击目标元素后显示一系列操作。ContextMenu2只是ContextMenu和ContextMenuTarget的替代品。ContextMenu2默认渲染其子元素周围的包装器元素以附加事件处理程序，但如果此元素破坏HTML或CSS布局并且希望移除它，则可以使用ContextMenu2高级渲染API完成。

React.js蓝图ContextMenu2 Props：

children： 它表示上下文菜单目标。
className： 它表示要传递给子元素的一个空格分隔的类名列表。
content： 它显示菜单内容，通常是一个Blueprint’组件。
disabled： 它确定上下文菜单是否禁用。
onContextMenu： 它是一个可选的上下文菜单事件处理程序，在我们想要在鼠标事件中执行与渲染上下文菜单本身无关的操作时使用，例如在React中设置一个状态。
popoverProps： 它表示要传递给由contextMenu组件生成的弹出窗口的有限子集props。
tagName： 它表示用于容器元素的HTML标签。

语法：

<ContextMenu
    content={...}
    ...
>
    <div>Right Click</div>
</ContextMenu>

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

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

npm create-react-app appname

步骤2： 创建项目文件夹，例如appname，使用以下命令进行切换：

cd appname

步骤3： 创建ReactJS应用后，使用以下命令安装所需模块：

npm install @blueprintjs/core

步骤4： 安装 @blueprintjs popover2 组件。

npm install @blueprintjs/popover2

项目结构：

React.js蓝图ContextMenu2高级用法

步骤5： 运行项目如下：

npm start

示例1: 下面的示例演示了contextMenu2组件的高级使用方式。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Menu } from "@blueprintjs/core"; 
import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
import classNames from "classnames"; 
  
export default function App() { 
    return ( 
        <center> 
            <div style={{ textAlign: "center",  
                color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs Blueprint ContextMenu2 Advanced usage 
                </h2> 
            </div> 
            <ContextMenu2 
                content={ 
                    <Menu> 
                        <MenuItem2 text="Download" /> 
                        <MenuItem2 text="Print" /> 
                        <MenuItem2 text="Delete" intent="danger" /> 
                    </Menu> 
                } 
            > 
                {(ContextMenu2ChildrenProps) => ( 
                    <div 
                        className={classNames 
                            ("my-context-menu-target",  
                            ContextMenu2ChildrenProps.className)} 
                        onContextMenu= 
                            {ContextMenu2ChildrenProps.onContextMenu} 
                        ref={ContextMenu2ChildrenProps.ref} 
                        style={{ 
                            backgroundColor: "#1EA902", 
                            color: "white", 
                            width: 100, 
                            padding: 10, 
                            borderRadius: 20, 
                        }} 
                    > 
                        {ContextMenu2ChildrenProps.popover} 
                        Right click me! 
                    </div> 
                )} 
            </ContextMenu2> 
        </center> 
    ) 
}

输出：

React.js蓝图ContextMenu2高级用法

示例2： 下面的示例演示了禁用contextMenu2组件的高级用法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Menu } from "@blueprintjs/core"; 
import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2"; 
import "@blueprintjs/select/lib/css/blueprint-select.css"; 
import classNames from "classnames"; 
  
export default function App() { 
    return ( 
        <center> 
            <div style={{ textAlign: "center",  
                color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs Blueprint ContextMenu2 Advanced usage 
                </h2> 
            </div> 
            <ContextMenu2 
                disabled={true} 
                content={ 
                    <Menu> 
                        <MenuItem2 text="Download" /> 
                        <MenuItem2 text="Print" /> 
                        <MenuItem2 text="Delete" intent="danger" /> 
                    </Menu> 
                } 
            > 
                {(ContextMenu2ChildrenProps) => ( 
                    <div 
                        className={classNames 
                            ("my-context-menu-target",  
                        ContextMenu2ChildrenProps.className)} 
                        onContextMenu={ 
                            ContextMenu2ChildrenProps.onContextMenu} 
                        ref={ContextMenu2ChildrenProps.ref} 
                        style={{ 
                            backgroundColor: "#1EA902", 
                            color: "white", 
                            width: 150, 
                            padding: 10, 
                            borderRadius: 20, 
                        }} 
                    > 
                        {ContextMenu2ChildrenProps.popover} 
                        Right click disabled! 
                    </div> 
                )} 
            </ContextMenu2> 
        </center> 
    ) 
}

输出:

React.js蓝图ContextMenu2高级用法