Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(qiankun): 优化文档 #6128

Merged
merged 1 commit into from
Feb 4, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions docs/plugins/plugin-qiankun.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Umi plugin for [qiankun](https://github.com/umijs/qiankun).

## 介绍

Umi 应用一键开启 [qiankun](https://github.com/umijs/qiankun) 微前端模式。
Umi 应用一键开启 [qiankun](https://github.com/umijs/qiankun) 微前端模式。

## Examples

Expand All @@ -29,7 +29,7 @@ Umi 应用一键开启 [qiankun](https://github.com/umijs/qiankun) 微前端模
```bash
$ yarn
$ yarn build
$ cd packages/plguin-qiankun && yarn start
$ cd packages/plugin-qiankun && yarn start
```

## Features
Expand Down Expand Up @@ -386,28 +386,28 @@ PORT=8081

1. 主应用使用下面任一方式透传数据:

1. 如果你用的 [MicroApp](#MicroApp) 组件模式消费微应用,那么数据传递的方式就跟普通的 react 组件通信是一样的,直接通过 props 传递即可:
1. 如果你用的 [MicroApp](#MicroApp) 组件模式消费微应用,那么数据传递的方式就跟普通的 react 组件通信是一样的,直接通过 props 传递即可:

```js
function MyPage() {
const [name, setName] = useState(null);
return <MicroApp name={name} onNameChange={newName => setName(newName)} />
}
```
```js
function MyPage() {
const [name, setName] = useState(null);
return <MicroApp name={name} onNameChange={newName => setName(newName)} />
}
```

2. 如果你用的 [路由绑定式](#RouteBased) 消费微应用,那么你需要在 `src/app.ts` 里导出一个 `useQiankunStateForSlave` 函数,函数的返回值将作为 props 传递给微应用,如:
```ts
// src/app.ts
export function useQiankunStateForSlave() {
const [masterState, setMasterState] = useState({});

2. 如果你用的 [路由绑定式](#RouteBased) 消费微应用,那么你需要在 `src/app.ts` 里导出一个 `useQiankunStateForSlave` 函数,函数的返回值将作为 props 传递给微应用,如:
```ts
// src/app.ts
export function useQiankunStateForSlave() {
const [masterState, setMasterState] = useState({});

return {
masterState,
setMasterState,
}
}
```

return {
masterState,
setMasterState,
}
}
```

2. 微应用中会自动生成一个全局 model,可以在任意组件中获取主应用透传的 props 的值。

```jsx
Expand Down Expand Up @@ -574,10 +574,10 @@ v2.3.0 完全兼容 v2 之前的版本,但我们还是建议您能升级到最
- )
-}
```

4. 关联微应用

比如我们之前配置了微应用名为 `microApp` base 为 `/microApp` ,mountElementId 为 `subapp-container`, 那么我们只需要(二选一):
比如我们之前配置了一个微应用名为 `microApp` base 为 `/microApp` ,mountElementId 为 `subapp-container`, 那么我们只需要(二选一):

a. 增加 `/microApp` 的路由(推荐)

Expand Down Expand Up @@ -651,9 +651,9 @@ v2.3.0 完全兼容 v2 之前的版本,但我们还是建议您能升级到最

- [ ] 运行时统一,针对多层嵌套微应用场景

- [ ] 微应用自动 mountElementId,避免多个 umi 子应用 mountElementId 冲突
- [x] 微应用自动 mountElementId,避免多个 umi 子应用 mountElementId 冲突

- [ ] 自动 loading
- [x] 自动 loading

- [ ] 本地集成开发支持

Expand Down
6 changes: 3 additions & 3 deletions docs/plugins/plugin-qiankun.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,7 @@ v2.3.0 完全兼容 v2 之前的版本,但我们还是建议您能升级到最

4. 关联微应用

比如我们之前配置了微应用名为 `microApp` base 为 `/microApp` ,mountElementId 为 `subapp-container`, 那么我们只需要(二选一):
比如我们之前配置了一个微应用名为 `microApp` base 为 `/microApp` ,mountElementId 为 `subapp-container`, 那么我们只需要(二选一):

a. 增加 `/microApp` 的路由(推荐)

Expand Down Expand Up @@ -647,9 +647,9 @@ v2.3.0 完全兼容 v2 之前的版本,但我们还是建议您能升级到最

- [ ] 运行时统一,针对多层嵌套微应用场景

- [ ] 微应用自动 mountElementId,避免多个 umi 子应用 mountElementId 冲突
- [x] 微应用自动 mountElementId,避免多个 umi 子应用 mountElementId 冲突

- [ ] 自动 loading
- [x] 自动 loading

- [ ] 本地集成开发支持

Expand Down