关于react实战

这里就是工作当中的点点滴滴吧 个人记录

关于路由

我前端端配置可能不会特别相同， 例如说我的就保存在config.ts中反正具体项目你搜索下就是了
没有比如 直接是我的项目的路由其实是有点类似oa系统的 就是左边菜单栏 右边是实例页面然后路由就很好写， 外面包裹下面确认啥的 ， 大概长这个样子， https://ant.design/ 里面应该是有实例的

 {
      path: '/list',
      icon: 'table',
      name: 'list(示例保留)',
      routes: [
        {
          path: '/xxx/xxxx',
          name: 'search-list',
          component: './list/xxx',
          routes: [
            {
              path: '/list/xxx',
              redirect: '/list/xxxx/xxxxxxx',
            },
            {
              name: 'projects',
              icon: 'smile',
              path: '/xxx/xxx/projects',
              component: './xxx/xxx/projects',
            },
            {
              name: 'applications',
              icon: 'smile',
              path: '/xxx/xxx/xxx',
              component: './xxx/xxx/xxx',
            },
          ],
        },

着重说下下面这块 也就是有name,icon,path,component这块
name： 其实就是你显示的名字是啥
icon： 就是旁边的图标单词去 官网找
path：就是你后端的路由
component： 就是你前段文件所在的位置

应该就是个控件。 小场面

---

关于portable

是真的牛批 直接上官方图，他可以根据你的参数直接在上面做一些搜索之类的东西
当然今天不是聊他， 所谓使用其实就是少上了一个hideInSearch，多上了一个参数valueEnum 然后就可以在上面所枚举搜索了， 但是今天我大哥跟我说不想要枚举了 太多了， 要能搜索能选择的这个一个形式， 具体长啥样就自己脑补吧，

{
    disable: true,
    title: '状态',
    dataIndex: 'state',
    filters: true,
    onFilter: true,
    ellipsis: true,
    valueType: 'select',
    valueEnum: {
      all: { text: '超长'.repeat(50) },
      open: {
        text: '未解决',
        status: 'Error',
      },
      closed: {
        text: '已解决',
        status: 'Success',
        disabled: true,
      },
      processing: {
        text: '解决中',
        status: 'Processing',
      },
    },
  },

这是正常的代码
然后我找了一圈组件，就是说 这个valueEnum 他不支持搜索， 只支持枚举，然后我就开始改造

import { Select } from 'antd';
{
    disable: true,
    title: '状态',
    dataIndex: 'state',
    filters: true,
    onFilter: true,
    ellipsis: true,
    valueType: 'select',
    // valueEnum: {}
    renderFormItem: () =>{
        const options = list.map(item => <option key={item.id}>{item.id+ '-' + item.name}</option>);
        return (
            <Select
            showSearch
            placeholder="请选择"
            optionFilterProp="children"
            filterOption={(input, option) =>
              (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
            }
          >
            {options}
          </Select>
        )}
  },

效果就不贴了 不太方便我做展示

---

便利字典

偶然抄到的 网站已经没了 。。。 对不起了各位， 这行代码我c定了

const options = Object.keys(你的字典).map(item => 你的字典[item]);