xwd-ant组件库笔记

1.ts

1.1 两个变量中重复定义了type属性，导致type最后识别为undefiend

import { ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";interface BaseButtonProps {children: React.ReactNode;className?: string;style?: React.CSSProperties;/**设置 QFButton 的禁用 */disabled?: boolean;/**设置 QFButton 的尺寸 */size?: "lg" | "sm";/**设置 QFButton 的类型 */type?: "primary" | "danger" | "ghost" | "dashed" | "link" | "text";href?: string;
}type NativeButtonProps = BaseButtonProps & Omit<ButtonHTMLAttributes<HTMLElement>, 'type'>;
type AnchorButtonProps = BaseButtonProps & Omit<AnchorHTMLAttributes<HTMLElement>, 'type'>;export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

修改

如果你想保持type这个属性名，并且覆盖原生的type属性，你可以使用交叉类型（Intersection Types）和 Omit 工具类型来实现。Omit 可以创建一个省略某些属性的类型。

在你的情况下，你可以从 ButtonHTMLAttributes<HTMLElement> 和 AnchorHTMLAttributes<HTMLElement> 中省略 type 属性，然后再与 BaseButtonProps 进行合并。这样，你就可以保留你在 BaseButtonProps 中定义的 type 属性了。

下面是修改后的代码：

import { ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";interface BaseButtonProps {children: React.ReactNode;className?: string;style?: React.CSSProperties;/**设置 QFButton 的禁用 */disabled?: boolean;/**设置 QFButton 的尺寸 */size?: "lg" | "sm";/**设置 QFButton 的类型 */type?: "primary" | "danger" | "ghost" | "dashed" | "link" | "text";href?: string;
}type NativeButtonProps = BaseButtonProps & Omit<ButtonHTMLAttributes<HTMLElement>, 'type'>;
type AnchorButtonProps = BaseButtonProps & Omit<AnchorHTMLAttributes<HTMLElement>, 'type'>;export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

这样，你的type属性就会覆盖原生的type属性。但是请注意，这可能会导致一些意想不到的行为，因为原生的type属性在某些情况下是有特定用途的。

2.调试

2.1 直接引入本地的组件库，模拟真实环境使用

由于组件库没有发包，有些组件还只是本地，导致无法直接import { ConfigProvider } from 'xwd-ant'，如果我要这样引入模式真实的使用情况，需要改下本地配置

import React from 'react';
// 一开始是这么引入的，直接引入本地组件，但是每次发版都需要手动修改，比较麻烦
// import ConfigProvider from './../index'; 
// 正常使用是直接引入ui库的
import { ConfigProvider } from 'xwd-ant';
import { Button } from 'xwd-ant';export default () => {return (<><ConfigProvider><Button type="primary">测试按钮</Button><Button danger>测试按钮</Button></ConfigProvider></>);
};

其实改下别名就可以了:''xwd-ant': process.cwd() + '/src'。

//.dumirc.ts
import { defineConfig } from 'dumi';export default defineConfig({outputPath: 'docs-dist',themeConfig: {name: 'xwd-ant',nav: [{ title: '介绍', link: '/guide' },{ title: '组件', link: '/components/Button' },],theme: {'@xwd-primary': '#1DA57A'}},// 取消打包静态单个组件库和函数工具exportStatic: false,styles: [`.dumi-default-header-left {width: 220px !important;}`,],alias: {'xwd-ant': process.cwd() + '/src'   // 将 xwd-ant 指向 src 目录},
});

然后在根index.js中把要使用的组件进行导出

//src\index.ts
export { default as Button } from './Button';
export { default as FloatButton } from './FloatButton';
export { default as formatDate } from './formatDate';
export { default as Layout } from './Layout';
export { default as PrimaryButton } from './PrimaryButton';
export { default as ConfigProvider } from './ConfigProvider';