React.js 蓝图 ContextMenu2 Props

Blueprint（蓝图） 是一个基于React的网络UI工具包。这个库非常优化，用于构建复杂且数据密集的桌面应用程序界面，非常受欢迎。

在本文中，我们将讨论React.js蓝图ContextMenu2的Props。上下文菜单在右键单击目标元素后显示操作列表。ContextMenu2只是ContextMenu和ContextMenuTarget的替代品。

React.js蓝图ContextMenu2的Props：

children（子元素）: 表示上下文菜单的目标。
className（类名）: 表示要传递给子元素的空格分隔的类名列表。
content（内容）: 显示菜单内容，通常是一个Blueprint的组件。
disabled（禁用）: 确定上下文菜单是否被禁用。
onContextMenu（右键菜单事件）: 可选的上下文菜单事件处理函数，当我们想要使用与渲染上下文菜单本身无关的鼠标事件来设置React状态时使用。
popoverProps（弹出框Props）: 表示要传递给上下文菜单组件生成的弹出框的一部分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 Props

步骤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"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint ContextMenu2 Props</h2> 
            </div> 
            <ContextMenu2 
                content={ 
                    <Menu> 
                        <MenuItem2 icon="git-repo" text="Git Repo" /> 
                        <MenuItem2 icon="git-commit" text="Commit" /> 
                        <MenuItem2 icon="git-merge" text="Merge" /> 
                        <MenuItem2 icon="git-branch" text="Branch" /> 
                    </Menu> 
                } 
            > 
                <div 
                    className="my-context-menu-target"
                    style={{ 
                        backgroundColor: "#1EA902", 
                        color: "white", 
                        width: 100, 
                        padding: 10, 
                        borderRadius: 20, 
                    }} 
                > 
                    Right Click 
                </div> 
            </ContextMenu2> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js 蓝图 ContextMenu2 Props

示例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"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint ContextMenu2 Props</h2> 
            </div> 
            <ContextMenu2 
                disabled={true} 
                content={ 
                    <Menu> 
                        <MenuItem2 icon="git-repo" text="Git Repo" /> 
                        <MenuItem2 icon="git-commit" text="Commit" /> 
                        <MenuItem2 icon="git-merge" text="Merge" /> 
                        <MenuItem2 icon="git-branch" text="Branch" /> 
                    </Menu> 
                } 
            > 
                <div 
                    className="my-context-menu-target"
                    style={{ 
                        backgroundColor: "#1EA902", 
                        color: "white", 
                        width: 100, 
                        padding: 10, 
                        borderRadius: 20, 
                    }} 
                > 
                    Right Click 
                </div> 
            </ContextMenu2> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js 蓝图 ContextMenu2 Props