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

[Bug] 3.0的React/Vue组件 #2846

Closed
qiYuei opened this issue Dec 14, 2023 · 8 comments · Fixed by #2849
Closed

[Bug] 3.0的React/Vue组件 #2846

qiYuei opened this issue Dec 14, 2023 · 8 comments · Fixed by #2849

Comments

@qiYuei
Copy link
Contributor

qiYuei commented Dec 14, 2023

bug

  1. nameentry 为空的时候不需要加载应用(场景是点击菜单才会加载对应的应用)
  2. error 没有清除,开启 auto-capture-error 后,第一个应用加载错误,切换第二个应用后 错误信息没有清除
  3. 缺少传递给子应用的 props

建议改进

  1. entryname 建议合并成一个 props
  2. loading 要不要增加点样式基础?
  3. 暴露卸载应用的方法给基座使用
  4. 有场景是要多个应用保持 keep-alive 的话,是不是要 循环渲染N个组件呢?

另外我主应用是 Vue3 但是我有子应用是 React 这要怎么渲染;😂

看看 @kuitos @bravepg 还有一个兄弟 @ 不到

@kuitos
Copy link
Member

kuitos commented Dec 14, 2023

  1. 这两个是 required 字段,没有的话应该报错
  2. 我看是有的

暴露卸载应用的方法给基座使用

为啥要这个方法?微应用的卸载应该跟着组件的生命周期一起,自动加载、卸载,不应该手动调用

有场景是要多个应用保持 keep-alive 的话,是不是要 循环渲染N个组件呢

这个跟调用 loadMicroApp 没区别吧,组件使用不同的 name、entry 就行

另外我主应用是 Vue3 但是我有子应用是 React 这要怎么渲染

主应用是 Vue 就用 vue 那个组件,跟子应用是什么技术栈没关系吧,ui-bindings 里的组件都是给主应用消费

@qiYuei
Copy link
Contributor Author

qiYuei commented Dec 14, 2023

  1. 这两个是 required 字段,没有的话应该报错

点击按钮或者点击其他才加载子应用的时候就要先 不渲染 组件 ? 不过这种方式也能接受

  1. 我看是有的

componentProps 是组件的 props 我看他们实现是用 omit 排除组件的 props 剩下就是应用的 props ,这种方式在 react 中可以但是在 Vue 中不行(没有定义的 props 会在 attrs 中),我觉得应该增加个 属性专门接收 应用的 props

暴露卸载应用的方法给基座使用

我在基座中现在想销毁子应用发现没办法,除非销毁渲染组件然后渲染组件在生命周期中销毁应用。现在都缺少这个逻辑

@kuitos
Copy link
Member

kuitos commented Dec 14, 2023

我在基座中现在想销毁子应用发现没办法,除非销毁渲染组件然后渲染组件在生命周期中销毁应用

就是应该在组件生命周期里做,组件销毁了子应用自动销毁

@kuitos
Copy link
Member

kuitos commented Dec 14, 2023

vue 这个版本的实现应该是有问题的

if (microApp) {
microApp._unmounting = true;
unmountMicroApp(microApp).catch((err: Error) => {
setComponentError(err);
loading.value = false;
});
microAppRef.value = undefined;
}

不应该是在 name 变化时才卸载子应用,组件 unmount 时也需要卸载 @linghaoSu

@bravepg
Copy link
Contributor

bravepg commented Dec 15, 2023

1、2 我来改下

  1. 就像 @kuitos 说的,基座不应该感知应用卸载,应该都放在组件里

  2. componentProps 是组件的 props 我看他们实现是用 omit 排除组件的 props 剩下就是应用的 props ,这种方式在 react 中可以但是在 Vue 中不行(没有定义的 props 会在 attrs 中),我觉得应该增加个 属性专门接收 应用的 props

(没有定义的 props 会在 attrs 中)要怎么理解?有相关文档或者案例发我看下么

@qiYuei
Copy link
Contributor Author

qiYuei commented Dec 15, 2023

(没有定义的 props 会在 attrs 中)要怎么理解?有相关文档或者案例发我看下么

https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance

@kuitos
Copy link
Member

kuitos commented Dec 18, 2023

@bravepg react 版本你直接改一下吧,vue 的版本 @linghaoSu 看下, @qiYuei 你有兴趣的话也可以直接提 pr 修复

@linghaoSu
Copy link

@bravepg react 版本你直接改一下吧,vue 的版本 @linghaoSu 看下, @qiYuei 你有兴趣的话也可以直接提 pr 修复

好的,我看下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants