mirror of
https://github.com/nocobase/nocobase
synced 2024-11-16 02:35:14 +00:00
b8d0ad8fbc
* feat: update docs * feat: update docs * fix: update docs * Add files via upload * Add files via upload * Update the-first-app.md * Update the-first-app.md * Update v08-changelog.md * feat: update docs Co-authored-by: Zhou <zhou.working@gmail.com>
74 lines
1.6 KiB
Markdown
74 lines
1.6 KiB
Markdown
# 概述
|
||
|
||
NocoBase 客户端的扩展大多以 Provider 的形式提供，无论是内置的 Provider 还是插件的主文件都是 Provider。
|
||
|
||
## 内置的 Providers
|
||
|
||
- APIClientProvider
|
||
- I18nextProvider
|
||
- AntdConfigProvider
|
||
- RemoteRouteSwitchProvider
|
||
- SystemSettingsProvider
|
||
- PluginManagerProvider
|
||
- SchemaComponentProvider
|
||
- SchemaInitializerProvider
|
||
- BlockSchemaComponentProvider
|
||
- AntdSchemaComponentProvider
|
||
- DocumentTitleProvider
|
||
- ACLProvider
|
||
|
||
## 客户端 Provider 模块的注册
|
||
|
||
静态的 Provider 通过 app.use() 注册，动态的 Provider 通过 dynamicImport 适配。
|
||
|
||
```tsx | pure
|
||
import React from 'react';
|
||
import { Application } from '@nocobase/client';
|
||
|
||
const app = new Application({
|
||
apiClient: {
|
||
baseURL: process.env.API_BASE_URL,
|
||
},
|
||
dynamicImport: (name: string) => {
|
||
return import(`../plugins/${name}`);
|
||
},
|
||
});
|
||
|
||
// 访问 /hello 页面时，显示 Hello world!
|
||
const HelloProvider = React.memo((props) => {
|
||
const location = useLocation();
|
||
if (location.pathname === '/hello') {
|
||
return <div>Hello world!</div>
|
||
}
|
||
return <>{props.children}</>
|
||
});
|
||
|
||
app.use(HelloProvider);
|
||
```
|
||
|
||
## 插件的客户端
|
||
|
||
初始化的空插件，服务端相关目录结构如下：
|
||
|
||
```bash
|
||
|- /my-plugin
|
||
|- /src
|
||
|- /client
|
||
|- index.tsx
|
||
|- client.d.ts
|
||
|- client.js
|
||
```
|
||
|
||
`client/index.tsx` 内容如下：
|
||
|
||
```tsx | pure
|
||
import React from 'react';
|
||
|
||
// 这是一个空的 Provider，只有 children 传递，并未提供自定义的 Context
|
||
export default React.memo((props) => {
|
||
return <>{props.children}</>;
|
||
});
|
||
```
|
||
|
||
插件 pm.add 之后，会向 `packages/app/client/src/plugins` 目录写入 `my-plugin.ts` 文件
|