react-admin antd使用过程中遇到的问题

报错解决

• [Ant Design] Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?

  • 问题 antd: 4.2.0, react: 16.13.1，Modal 中使用 Form ，使用 React Hooks const [form] = Form.useForm(); 创建实例时，会出现以下警告。
    
  • 原因: Modal 挂载的 HTML 节点默认为 document.body，页面初始化时，在当前模块下找不到 Form 表单。
  • 解决方案: Modal 添加属性 getContainer={false} ，挂载在当前 dom。

• react中使用 table 定义fixed typescript报错 不能为'left' or 'right' 只能为boolean值

• 解决方案:

// 使用类型断言
columns: [
      {
        title: 'xxx',
        dataIndex: 'xxx',
        fixed: 'left' as 'left', // cast fixed
      },
]

• 参考地址 antd iss地址

• antd 自定义icon

方式一

• antd 自定义 Icon 的几种方式及其优劣 #33
• 动态引入svg， 配合loadable 参考地址

// loadable 示例
 import Loadable from '@loadable/component';
 
 import Loading from './my-loading-component';
 
 const LoadableComponent = Loadable({
 
     loader: () => import('./my-component'),
 
     fallback: <Loading />
 
 });
 
 export default class App extends React.Component {
 
     render() {
 
         return <LoadableComponent/>;
 
}}

// Svg/index.tsx
import React from "react";
import Icon from "@ant-design/icons";
import loadable from "@loadable/component";

interface Props {
  // svg 名称
  name: string;
  // 宽度
  width?: number;
  // 高度
  height?: number;
  // 类名
  className?: string;
}
// 自定义svg直接为组件使用
const SvgComponent = (props: Props) => {
  // 动态引入组件svg组件
  const DynamicImport: any = loadable(() =>
    import(`@/assets/screen/${props.name}`)
  );
  // <Full
  //           width={20}
  //           height={20}
  //           className={
  //             props.status ? "custom-icon-full-other" : "custom-icon-full"
  //           }
  //         />
  return (
    <>
      {/* custom-icon-full-other */}
      <Icon
        component={() => (
          <DynamicImport
            className={props.className}
            width={props.width ? props.width : 20}
            height={props.height ? props.height : 20}
          />
        )}
      />
    </>
  );
};
export default SvgComponent;

方式二

• 根据@svgr/webpack 转换为react 组件

// webpack.dev.config.js
// svg作为组件导入
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "babel-loader",
          },
          {
            loader: "@svgr/webpack",
            options: {
              babel: false,
              icon: true,
            },
          },
        ],
     },

• antd 自定svg图标
• 根目录添加 babel 配置

// babel.config.js
/*
 * @Description:
 * @version:
 * @Author: 周凯
 * @Date: 2020-07-16 15:09:56
 * @LastEditors: 周凯
 * @LastEditTime: 2020-07-16 15:22:04
 */
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-proposal-class-properties",
  ],
};

• 使用

import React from "react";
import Icon from "@ant-design/icons";
import loadable from "@loadable/component";

interface Props {
  // svg 名称
  name: string;
  // 宽度
  width?: number;
  // 高度
  height?: number;
  // 类名
  className?: string;
}
// 自定义svg直接为组件使用
const SvgComponent = (props: Props) => {
  // 动态引入组件svg组件
  const DynamicImport: any = loadable(() =>
    // @ts-ignore
    import(`@/assets/outSvg/${props.name}.svg`)
  );
  // <Full
  //           width={20}
  //           height={20}
  //           className={
  //             props.status ? "custom-icon-full-other" : "custom-icon-full"
  //           }
  //         />
  return (
    <>
      {/* custom-icon-full-other */}
      {props.name ? (
        <Icon
          component={() => (
            <DynamicImport
              className={props.className}
              width={props.width ? props.width : 20}
              height={props.height ? props.height : 20}
            />
          )}
        />
      ) : null}
    </>
  );
};

export default SvgComponent;