前端 - 请问是否有右键打开选项列表的React插件？

Question

请问是否有如下的开源的UI插件呢？
就是右键直接打开一个列表，我找了antd是没有这样的插件的：

Answer 1

antd是有的 dropdown组件

我用 antd 实现 阿里云盘就是用的这个组件结合其他

你的问题 1 解决方案
最简单的办法
右键为显示状态 那你就可以把不希望能点击的区域设置成不可点击就行了 false 时再设置成可点击就行了
随便都能实现的

<Dropdown          menu={{            items: toJS(tableStore.contextMenus).map((item: any) => {              const { emptyShow, needSelected, ...reset } = item;              return reset;            }),            onClick: (event) => onRightMenuClick?.(event.key, tableStore.rightClickSelectRowInfo, tableStore.currentIndex)          }}          overlayClassName="table-dropdown"          trigger={['contextMenu']}          overlayStyle={{ minWidth: 200, }}          onOpenChange={(open) => {            const back = document.getElementsByClassName('ant-table-tbody')[0] as HTMLDivElement;            if (open && back) {              //  不可点击              back.style.pointerEvents = 'none';              return;            }            back.style.pointerEvents = 'auto';          }}        ></Dropdown>

Answer 2

https://www.radix-ui.com/primitives/docs/components/context-menu

推荐使用 shadcn
https://ui.shadcn.com/docs/components/context-menu

Answer 3

您可以使用 React Context API 或其他状态管理库（如 Redux 或 MobX）来实现此功能。React Context API 是内置的，而其他状态管理库可能需要额外的设置和配置。

使用 React Context API 的基本步骤如下：

1. 创建一个 context 对象，用于存储状态和状态更新函数。

import React, { createContext, useState } from 'react';const AppContext = createContext();function AppProvider({ children }) {  const [state, setState] = useState('initial state');  const value = { state, setState };  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;}

2. 在您的组件中，使用 useContext hook 从 context 中获取状态和状态更新函数。

import React, { useContext } from 'react';import AppContext from './AppContext';function MyComponent() {  const { state, setState } = useContext(AppContext);  const handleClick = () => {    setState('new state');  };  return (    <div>      <p>{state}</p>      <button onClick={handleClick}>Update State</button>    </div>  );}

3. 将 AppProvider 组件包装在您的应用程序的最上层，以便所有组件都可以访问 context 中的状态。

import React from 'react';import AppProvider from './AppProvider';import MyComponent from './MyComponent';function App() {  return (    <AppProvider>      <MyComponent />    </AppProvider>  );}