Skip to content

Commit

Permalink
Update the-first-extension.md
Browse files Browse the repository at this point in the history
  • Loading branch information
baoyachi authored Jun 26, 2024
1 parent a114a2a commit 3cd4045
Showing 1 changed file with 3 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar_position: 1
在 Molecule 中,所有的自定义的功能,都是利用[扩展(Extension)](./guides/extension)来完成的。接下来让我们基于 [molecule-demo][demo-url] 项目,快速学习一下如何编写一个扩展应用。

:::tip
本文内容中的所有代码,都以 [Quick Start](./quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。
本文内容中的所有代码,都以 [Quick Start](./quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo) 项目为基础演示。
:::

## 一个简单的场景
Expand Down Expand Up @@ -93,7 +93,7 @@ export function handleSelectFolderTree() {
`API.getFolderTree` 方法获取文件树数据成功后,我们通过 [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) 方法,将数据添加并展示到 [FolderTree](./api/classes/molecule.FolderTreeService) 组件中;通过 [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onselectfile) 方法监听**选中文件**;最后通过 [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) 方法打开文件。

:::caution
需要注意的是,在现实情况中,`API.getFolderTree` 返回的**数据类型**并不是 [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) 类型,我们往往需要经过一个**转换**方法。示例中 `API.getFolderTree` 函数的 Mock 数据可以[查看](https://github.com/DTStack/molecule-examples/blob/main/packages/molecule-demo/public/mock/folderTree.json)`handleSelectFolderTree` 方法中的 `transformToEditorTab` 为一个**转换**方法,主要是将`file`转换为[IEditorTab](./api/interfaces/molecule.model.IEditorTab) 类型。
需要注意的是,在现实情况中,`API.getFolderTree` 返回的**数据类型**并不是 [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) 类型,我们往往需要经过一个**转换**方法。示例中 `API.getFolderTree` 函数的 Mock 数据可以[查看](https://github.com/DTStack/molecule-examples/blob/main/molecule-demo/public/mock/folderTree.json)`handleSelectFolderTree` 方法中的 `transformToEditorTab` 为一个**转换**方法,主要是将`file`转换为[IEditorTab](./api/interfaces/molecule.model.IEditorTab) 类型。
:::

### 使用扩展
Expand Down Expand Up @@ -133,6 +133,6 @@ const moInstance = create({

**第一个扩展**的完整源码,请[浏览][demo-url]

[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/theFirstExtension
[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/theFirstExtension
[foldertree-url]: ./guides/extend-builtin-ui#文件树foldertree
[create-url]: ./api#create

0 comments on commit 3cd4045

Please sign in to comment.