如何开发一个人人爱的组件？

意识

接口设计

type Size = any; // 😖 ❌type Size = string; // 🤷🏻♀️type Size = "small" | "medium" | "large"; // ✅

export interface IProps {className?: string;  style?: React.CSSProperties;}

export type CommonDomProps = {className?: string;  style?: React.CSSProperties;} & Record<`data-${string}`, string>// component.tsxexport interface IComponentProps extends CommonDomProps {  ...}// orexport type IComponentProps = CommonDomProps & {  ...}

export type IListProps{/**   * Custom suffix element.   * Used to append element after list   */  suffix?: React.ReactNode;/**   * List column definition.   * This makes List acts like a Table, header depends on this property   * @default []   */  columns?: IColumn[];/**   * List dataSource.   * Used with renderRow   * @default []   */  dataSource?: Array<Record<string, any>>;}

toolbar?: React.ReactNode; // List toolbar.// 👇🏻 Columns // defaultValue is "[]"  columns?: IColumns[];

export type IInputProps = {  label?: string; // ❌}export type IInputProps = {  label?: React.ReactNode; // ✅}

export type IFormProps<T = string> = {  value?: T;  defaultValue?: T;  onChange?: (value: T, ...args) => void;};

export type IVisibleProps = {/**   * The visible state of the component.   * If you want to control the visible state of the component, you can use this property.   * @default false   */  visible?: boolean;/**   * The default visible state of the component.   * If you want to set the default visible state of the component, you can use this property.   * The component will be controlled by the visible property if it is set.   * @default false   */  defaultVisible?: boolean;/**   * Callback when the visible state of the component changes.   */  onVisibleChange?: (visible: boolean, ...args) => void;};

export type IFormProps = {/**   * Field name   */  name?: string;/**   * Field label   */  label?: ReactNode;/**   * The status of the field   */  state?: 'loading' | 'success' | 'error' | 'warning';/**   * Whether the field is disabled   * @default false   */  disabled?: boolean;/**   * Size of the field   */  size?: 'small' | 'medium' | 'large';/**   * The min value of the field   */  min?: number;/**   * The max value of the field   */  max?: number;};

export interface ISelection<T extends object = Record<string, any>> {/**   * The mode of selection   * @default 'multiple'   */  mode?: 'single' | 'multiple';/**   * The selected keys   */  selectedRowKeys?: string[];/**   * The default selected keys   */  defaultSelectedRowKeys?: string[];/**   * Max count of selected keys   */  maxSelection?: number;/**   * Whether take a snapshot of the selected records   * If true, the selected records will be stored in the state   */  keepSelected?: boolean;/**   * You can get the selected records by this function   */  getProps?: (record: T, index: number) => { disabled?: boolean; [key: string]: any };/**   * The callback when the selected keys changed   */  onChange?: (selectedRowKeys: string[], records?: Array<T>, ...args: any[]) => void;/**   * The callback when the selected records changed   * The difference between `onChange` is that this function will return the single record   */  onSelect?: (selected: boolean, record: T, records: Array<T>, ...args: any[]) => void;/**   * The callback when the selected all records   */  onSelectAll?: (selected: boolean, keys: string[], records: Array<T>, ...args: any[]) => void;}

mode="single" -> value: string | numbermode="multiple" -> value: string[] | number[]

组件设计

export type IAsyncProps {  requestUrl?: string;  extParams?: any;}

export type IAsyncProps {  requestUrl?: string;  extParams?: any;  beforeUpload?: (res: any) => any  format?: (res: any) => any}

export type ProductList = {  total: number;  list: Array<{    id: string;    name: string;    image: string;    ...  }>}export type AsyncGetProductList = (  pageInfo: { current: number; pageSize: number },  searchParams: { name: string; id: string; },) => Promise<ProductList>;export type IComponentProps = {/**   * The service to get product list   */  loadProduct?: AsyncGetProductList;}

export function Page() {const lzdUploadProps = useLzdUpload({ bu: 'seller' });return <Upload {...lzdUploadProps} />}

export type IExpandProps = {  children?: (ctx: { isExpand: boolean }) => React.ReactNode;}

export function Page() {return (<Expand>      {({ isExpand }) => {        return isExpand ? <Table /> : <AnotherTable />;      }}</Expand>  );}

文档设计

{"name": "xxx-ui","version": "1.0.0","description": "Out-of-box UI solution for enterprise applications from B-side.","author": "[email protected]","exports": {".": {"import": "./dist/esm/index.js","require": "./dist/cjs/index.js"    }  },"main": "./dist/cjs/index.js","module": "./dist/esm/index.js","types": "./dist/cjs/index.d.ts","repository": {"type": "git","url": "[email protected]:yee94/xxx.git"  }}