React 点击删除列表中对应项（React 获取DOM中自定义属性）

要实现点击删除列表中对应项的功能，可以首先在列表项中添加一个自定义属性，用于标识该项的唯一性。例如，可以给每个列表项添加一个id属性：

<ul>
  {list.map(item => (
    <li key={item.id} data-id={item.id} onClick={handleDelete}>
      {item.title}
    </li>
  ))}
</ul>

在点击事件中，可以通过event.target获取到被点击的元素，从而获取到该元素的自定义属性值。代码示例如下：

function handleDelete(event) {
  const id = event.target.getAttribute('data-id');
  // 根据id删除对应的列表项
}

然后，根据获取到的id值，可以执行删除操作。具体实现方式根据具体情况而定，可以使用React的状态管理工具（如useState、useReducer等）来管理列表数据，并在删除时更新状态。

相关问题

react-router-dom中lazy

React Router Dom中的`lazy`函数是用于实现路由懒加载的功能。懒加载是一种优化技术，它可以延迟加载某个组件，只有在需要的时候才进行加载，而不是一开始就加载所有的组件。

使用`lazy`函数，你可以将一个组件包装起来，并通过动态导入的方式进行加载。例如，你可以这样使用`lazy`函数：

import { lazy } from 'react';
import { Switch, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
}

在上面的例子中，我们通过`lazy`函数将`Home`、`About`和`Contact`组件进行了懒加载。当访问对应的路由时，才会进行相应组件的加载。

需要注意的是，懒加载需要和`Suspense`组件一起使用，以处理在组件加载过程中的等待状态。你可以在代码中添加一个`Suspense`组件来包裹你的路由组件：

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Suspense>
  );
}

在上面的例子中，我们定义了一个`fallback`属性，用于在组件加载过程中显示一个加载中的状态。你可以根据需要自定义这个状态。

这就是在React Router Dom中使用`lazy`函数进行路由懒加载的基本用法。通过懒加载，可以提高应用程序的性能和加载速度，特别是当应用程序包含大量组件时。

react wangeditor自定义菜单

### React 中使用 WangEditor 实现自定义菜单

在 React 项目中集成 WangEditor 并实现自定义菜单可以通过以下方法完成：

#### 安装依赖包
首先，在项目中安装 `@wangeditor/editor` 和 `@wangeditor/editor-for-react`。

npm install @wangeditor/editor @wangeditor/editor-for-react --save

#### 初始化编辑器实例
创建一个用于挂载编辑器 DOM 节点的容器，并通过 `useRef()` 获取该节点。接着利用 `useEffect()` 来初始化编辑器实例，确保只会在首次渲染时运行一次[^1]。

import { useRef, useEffect } from 'react';
// 导入 Editor 组件以及核心依赖
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { createEditor } from '@wangeditor/editor';

function MyComponent() {
    const editorRef = useRef(null);
    
    useEffect(() => {
        const editorInstance = createEditor({
            selector: '#editor-container',
            config: {},
            mode: "default", // 或者 simple
        });
        
        return () => {
            editorInstance.destroy();
        };
    }, []);
}

#### 添加自定义工具栏按钮
为了向默认工具栏添加新的命令项，可以在配置对象内指定 `toolbarConfig` 属性下的 `customMenus` 数组来注册额外的功能键[^2]。

const customMenuKeys = ['myCustomButton'];

config.toolbarConfig.customMenus = [
    ...customMenuKeys,
];

// 注册自定义菜单对应的逻辑处理函数
editorInstance.config.onMenuClick = (menuKey) => {
    if(menuKey === 'myCustomButton'){
        alert('点击了我的自定义按钮');
    }
};

#### 渲染组件结构
最后一步是在 JSX 模板里放置实际的 HTML 结构以便于编辑器能够正确附着上去[^3]。

<div>
    <!-- 编辑区域 -->
    <div id="editor-container"></div>

    {/* 如果需要显示顶部工具条 */}
    <Toolbar 
      editor={editor} 
      defaultConfig={{}} 
      style={{borderBottom:'1px solid #ccc'}}
    />
</div>

以上就是完整的基于 React 使用 WangEditor 构建带自定义菜单的过程说明。