react组件复用提取，注册为公共组件

react组件复用提取，注册为公共组件

• 当一个组件使用于每一个页面，为了方便简单的使用，不必要每次都进行将所有的代码进行编写，再遇到复杂件的时候，我们为了减少每个页面代码量，也为了方便后期对系统代码的维护，减少工作量。可以将其注册为公共组件，从而进行每个页面进行引用使用。（ 我们会遇到多个组件使用同一个数据，那时候我们就需要消除掉每一个组件中的数据，而构造出一个公共的祖先组件来处理）

• 1. 例如常用的状态转换，启用，禁用

- 进行注册（Status）
-Status文件夹下的index.js 文件
   import React from 'react';
   export default (props) => {
   const { flagVal, fn } = props;
   const statusList = [
    {
      flage: 0,
      flagText: '启用',
    },
    {
      flage: 1,
         flagText: '禁用',
    },
  ];

  const tagFlag = () => {
    let tagList = {
      0: (
        <a
          onClick={() => {
            fn();
          }}
        >
        {statusList[0].flagText}
        </a>
      ),
      1: (
        <a
          style={{ color: 'red' }}
          onClick={() => {
            fn();
          }}
        >
         {statusList[1].flagText}
        </a>
      ),
    };
    return tagList[flagVal];
  };
  return (
     <>
      <div>
        {tagFlag()}
      </div>
    </>
  );
};

      

2.进行引入使用该组件

import TagList from '@/components/Status';
 <TagList
          flagVal={record.blockState}
          key="status"
          fn={async () => {
            const res = await pageService.open({}, record.id);
                if (res.msgCode === '000000') {
              message.success(`${statusObj[record.blockState].text}成功`);
              actionRef.current.reload();
            } else {
              message.error(res.message);
            }
          }}
        />,
      ],
    },
  ];

3.接口

import { request } from 'ice';
import env from '@/utils/env';
  // 获取分页列表
  export default {
  async getList(data, str) {
    return await request({
      method: 'post',
      url: `/block/info/list${str}`,
      data,
    });
  },
    // 新增
  async addPerson(data) {
    return await request({
      method: 'POST',
      url: '/license/changeRecord/add',
      data,
    });
  },
   // 导出黑名单
  async exports(data) {
    return await request({
      method: 'post',
      url: '/block/export/list',
      baseURL: env.baseUrl,
      data,
    });
  },
  
  // 下载模板
  async exportTemplate(data) {
    return await request({
      url: '/block/download/template',
      method: 'POST',
      data,
      responseType: 'blob',
    });
  },
    // 新增
  async add(data) {
    return await request({
      method: 'post',
      url: '/block/info',
      baseURL: env.baseUrl,
      data,
    });
  },
    // 单个启用停用
  async open(params, id) {
    return await request({
      method: 'post',
      url: `/block/info/state/${id}`,
      params,
    });
  },
  async opens(data) {
    return await request({
      method: 'post',
      url: '/block/info/state',
      data,
    });
  },
  };