基于antd and react 封装按钮Botton，显示不同的Botton以及它各自的功能 -- 简单封装mock

需求： 有n个页面，但是页面的Botton功能类似，所以可以封装成一个Botton组件做成sider

1.简单来说，就是遍历按钮数组，去显示出有什么按钮，权限在后端设置，点击会执行各自功能

2.按钮出来了，比较重要的是按钮的功能。点击的时候触发action，action会拿配置的函数，去执行，比如对于submit 会去拿一些forms 的数据 （还要去存储forms的数据并且拿，检验等等，本文未写）再去调接口，submit给后端
3.会涉及到数据流dva 的使用，详细可以去别的文章学习～ 其实跟vue常用的数据流方案差不多的
按钮组件

import { Button, Form } from 'antd';
import action from './action';
import BtnEnum from './BtnEnum';
import { connect } from 'dva';

export default connect(
  ({ forms }: any) => ({
    BtnConfig: forms?.BtnConfig?.BtnConfig
  })
)(({ dispatch, BtnConfig }: any) => {
  //后端提供的 动态 button list  activityBtnList
  const activityBtnList = [
    {
      index: 1,
      btncode: BtnEnum?.submit,
    },
    {
      index: 2,
      btncode: BtnEnum?.save,
    },
  ];
  return (
    <>
      {
        activityBtnList.map((BtnList) => {
          return (
            <Button onClick={
              action({
                dispatch,
                index: BtnList?.index,
                actionConfig: {
                  ...BtnConfig?.[BtnList?.btncode]
                }
              })}>
              {BtnList?.btncode}
            </Button>
          );
        })}
    </>
  );
});

action 以及 其他函数

import loopService from './loopService'
import BtnEnum from './BtnEnum';
export default ({ dispatch, index, actionConfig = {} }: any) => {
  return async () => {
    const actionResult = loopService({
      dispatch,
      index,
      actionConfig,
    })

    return null
  }
};

import { isFunction } from 'lodash'
export default async ({
    dispatch,
    index,
    actionConfig,
}: any) => {
    let isSucess = true
    let params = {}
    if (isFunction(actionConfig?.action)) {
        params = await actionConfig?.action({ dispatch })
    }

    //调用接口 把参数params传入

    return { isSucess, }
}

页面功能的配置，页面初始化的时候可以把配置保存好 ，其他函数好拿去用

export default {
    submit: {
        validate: () => {
            console.log('submit  validate start');
        },
        action: async ({ dispatch }: any) => {
            console.log('start');
            const getDataForSubmit = await dispatch({
                type: 'forms/getDataForSubmit'
            })
            console.log('getDataForSubmit---', getDataForSubmit);
            console.log(' end');
            return {
                1: getDataForSubmit
            }
        }
    },
    save: {
        action: async () => {
            console.log('action_save  start');
            return "save.action"
        }
    }
}

关于校验部分的封装：
需求： 点击各个按钮后需要自动校验filed
思路： 把各个section form 的 方法存储起来，去触发即可
需要注意的是存储 form实例整个/还是只存它们的方法，
action, 触发  
const errors = await dispatch({
      type: 'forms/validateForm',
    })

import loopService from './loopService'
import BtnEnum from './BtnEnum';
export default ({ dispatch, index, actionConfig = {} }: any) => {
  return async () => {
    const errors = await dispatch({
      type: 'forms/validateForm',
    })

    const actionResult = loopService({
      dispatch,
      index,
      actionConfig,
    })

    return null
  }
};

 validateForm(state: any, { payload }: any) {
      const forms = state?.forms
      const errors = validateFormGetErrors({
        forms: values(forms)
      })
      return errors
    },

validateFormGetErrors

import lodash from 'lodash'
export default ({ forms }: any) => {
    if (lodash.isArray(forms)) {
        const errors =
            lodash
                .chain(forms)
                .map((form: any) => {
                    return new Promise((resolve, reject) => {
                        form.validateFields()
                            .then((info: any) => {
                                resolve([])
                            })
                            .catch((erroInfo: any) => {
                                resolve(erroInfo)
                            })
                    })
                })
                .value()
        return errors
    }
    return []
}