0.1.4 • Published 9 months ago

@ks-dilu/react-micro v0.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

@ks-dilu/react-micro

微前端 react 子应用 SDK,简化微前端子应用的接入的成本,同时优化了 qiankun update 子应用的逻辑

Install

npm install -S @es/dilu-react-micro

Usage

qiankun 的子应用都需要重复的实现 bootstrap, mount, unmount, update 的逻辑,使用 @ks-dilu/react-micro 大大简化了子应用的接入逻辑

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { registerDLMicro, isDLRunEnvironment, DLMicroContext } from '@es/dilu-react-micro';

registerDLMicro({
  App: () => {
    return (
      <DLMicroContext.Consumer>
        {(value: any) => {
          console.log('gml', value);
          return <App user={value.user} sso={value.sso}></App>;
        }}
      </DLMicroContext.Consumer>
    );
  },
  rootNodeId: 'root',
});

!isDLRunEnvironment() &&
  ReactDOM.render(
    <React.StrictMode>
      <App user={{}} sso={{}} />
    </React.StrictMode>,
    document.getElementById('root'),
  );

export * from '@ks-dilu/react-micro';

API

registerDLMicro

  • 参数:(options, isRenderByNonDLEnvironment)=> {mount, update, unmount, bootstrap}
  • 描述:封装了 qiankun 子应用的逻辑,该方法收敛注册子应用的逻辑
  • isRenderByNonDLEnvironment 是否在非的卢环境下自动挂载应用,默认 false
  • options 参数说明
参数类型描述必填默认值
AppReactElement、FunctionComponent 、React.FC子应用的入口必填
rootNodeIdstring子应用的根节点 Id必填
vueAppCbfunction实例化 vue 时的回调,用于挂载 vue 的插件等,vue2 和 vue3 有细微差别,可以查看相关 demo 的使用选填

DLMicroContext

用于获取从主应用透传的 props, 具体有什么内容,取决于主应用中的 extra;

useDLMicroValue

获取主应用透传子应用 Props 的 hooks,

isDLRunEnvironment

是否是在微前端的环境

0.1.4

9 months ago

0.1.3

12 months ago

0.1.0

1 year ago

0.1.0-alpha.2

1 year ago

0.0.2

1 year ago

0.0.2-beta.0

1 year ago