Maofeng
45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
---
|
|
title: 定义 Action
|
|
description: 在保留自动依赖收集能力的同时添加产品专属行为。
|
|
order: 20
|
|
toc:
|
|
- id: declare-the-action
|
|
title: 声明 Action
|
|
- id: custom-control
|
|
title: 自定义控件
|
|
- id: typed-values
|
|
title: 类型化参数
|
|
---
|
|
|
|
## 声明 Action {#declare-the-action}
|
|
|
|
将命令与其编辑器依赖放在同一个定义中：
|
|
|
|
```tsx
|
|
const Mention = defineLexicalAction({
|
|
name: "mention",
|
|
label: "插入提及",
|
|
nodes: [MentionNode],
|
|
plugins: [MentionPopoverPlugin],
|
|
execute: ({ editor }) => openMentionPicker(editor),
|
|
})
|
|
```
|
|
|
|
只要 `<Mention />` 出现在 `LexicalActions` 内，它需要的节点和插件就会自动启用。
|
|
|
|
## 自定义控件 {#custom-control}
|
|
|
|
```tsx
|
|
<Mention>
|
|
{({ disabled, execute }) => (
|
|
<MentionButton disabled={disabled} onSelect={execute} />
|
|
)}
|
|
</Mention>
|
|
```
|
|
|
|
替换可见控件不会改变依赖收集结果。
|
|
|
|
## 类型化参数 {#typed-values}
|
|
|
|
渲染上下文会公开带有 Action 参数类型的 `execute(value?)`。普通按钮可以使用无参数快捷方式 `onClick`。
|