特性

• 可根据应用资源配置动态生成页面结构
• 可根据配置完成接口的自动请求、数据的自动填充
• 可自动生成表单，支持基本的表单校验

快速上手

👉 在线文档

📢 注意事项

👀 默认配置

📕 更新日志

安装

使用 yarn 安装

yarn add bmc-dynamic

创建配置文件

在当前项目根目录下创建一个 .dynamicrc.ts 文件，并在其中导出以下内容，此文件为 bmc-dynamic 的配置文件，主要负责配置组件映射、元数据映射、对话框变体、自定义的组件配置等，详细说明可见

import { IOptions } from 'bmc-dynamic';

export default <IOptions> {
  componentMap: {},
  metaDataMap: {},
  dialogVariants: {},
  customComponentProps: {}
}

创建组件目录

📢在 src 下新建 components 目录（用于存放需要动态加载的组件），并在其下创建一个 .gitkeep 文件，后续在其下存放的组件的目录结构需要满足以下要求

• 如创建一个 FileUploader 组件，其目录结构应为 /src/components/FileUploader/index.tsx
• 组件文件必须是 tsx
• 组件文件必须 export default 该组件

引入 Parser

👉建议签出 Demo项目 查看用法

• 打开 应用资源配置 开始配置应用

• 配置好之后在当前项目的入口中加入 bmc-dynamic 的 Parser，以下为示例，仅为参考，重点是把应用资源配置传递给 Parser 组件

  v0.0.33

  使用 register api 设置，配置同 customComponentProps，会与其深度合并，由于本质上和 customComponentProps 一样，所以优先级同其 Parser 组件现在支持渲染指定组件或对话框，可见更新日志

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Stack } from '@mui/material';
import { getAppResourceTree } from '@/api/api';
import { setAppResources } from '@/redux/slice/appResourceSlice';
import { Parser } from 'bmc-dynamic';
import { RootState } from '@/redux/store';

export default () => {
  const dispatch = useDispatch();

  useEffect(() => {
    getAppResourceTree('1495955896297500673').then(res => {
      res?.data && dispatch(setAppResources(res.data));
    });
  }, []);

  const appDescriptions = useSelector((state: RootState) => state.appResource.appResources);

  return (
    <Stack height="calc(100vh - 2rem)" padding={2}>
      <Parser appResources={appDescriptions} enableMemo/>
    </Stack>
  );
}

详细说明

👉 文档

[[include:Tips.md]]

[[include:DefaultValue.md]]

[[include:ReleaseNote.md]]