Repository: ant-design/ant-design-mobile
Pull request #6242 (2023-07-11 07:19:31)

feat: CascaderView support fieldNames
#6079

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6242.surge.sh
codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage: **`100.00`**% and project coverage change: **`+0.01`** :tada:
> Comparison is base [(`ae1f895`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/ae1f895e6e7012dbd8aeb3bd8e6e794dbd3f3bc2?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 91.03% compared to head [(`3540bc6`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 91.05%.

> :exclamation: Current head 3540bc6 differs from pull request most recent head e3459b7. Consider uploading reports for the commit e3459b7 to get more accurate results

<details><summary>Additional details and impacted files</summary>


```diff
@@             Coverage Diff             @@
##           feature    #6242      +/-   ##
===========================================
+ Coverage    91.03%   91.05%   +0.01%     
===========================================
  Files          305      307       +2     
  Lines         6583     6596      +13     
  Branches      1643     1648       +5     
===========================================
+ Hits          5993     6006      +13     
  Misses         544      544              
  Partials        46       46              
```


| [Impacted Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/cascader/cascader.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FzY2FkZXIvY2FzY2FkZXIudHN4) | `76.00% <ø> (ø)` | |
| [src/components/cascader-view/cascader-view.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FzY2FkZXItdmlldy9jYXNjYWRlci12aWV3LnRzeA==) | `94.52% <100.00%> (+0.15%)` | :arrow_up: |
| [src/hooks/index.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2hvb2tzL2luZGV4LnRzeA==) | `100.00% <100.00%> (ø)` | |
| [src/hooks/useFieldNames.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2hvb2tzL3VzZUZpZWxkTmFtZXMudHN4) | `100.00% <100.00%> (ø)` | |


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6242?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/action-sheet/action-sheet.tsx b/src/components/action-sheet/action-sheet.tsx
index f48febef8..bd9a51d36 100644
--- a/src/components/action-sheet/action-sheet.tsx
+++ b/src/components/action-sheet/action-sheet.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
@@ -21,8 +22,8 @@ export type Action = {
 export type ActionSheetProps = {
   visible?: boolean
   actions: Action[]
-  extra?: React.ReactNode
-  cancelText?: React.ReactNode
+  extra?: ReactNode
+  cancelText?: ReactNode
   onAction?: (action: Action, index: number) => void
   onClose?: () => void
   onMaskClick?: () => void
@@ -30,7 +31,7 @@ export type ActionSheetProps = {
   closeOnMaskClick?: boolean
   safeArea?: boolean
   popupClassName?: string
-  popupStyle?: React.CSSProperties
+  popupStyle?: CSSProperties
 } & Pick<
   PopupProps,
   'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
diff --git a/src/components/auto-center/auto-center.tsx b/src/components/auto-center/auto-center.tsx
index db06be789..bb648d9d1 100644
--- a/src/components/auto-center/auto-center.tsx
+++ b/src/components/auto-center/auto-center.tsx
@@ -1,9 +1,10 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = 'adm-auto-center'
 
-export type AutoCenterProps = { children?: React.ReactNode } & NativeProps
+export type AutoCenterProps = { children?: ReactNode } & NativeProps
 
 export const AutoCenter: FC<AutoCenterProps> = props => {
   return withNativeProps(
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 7da94c5de..f8afa3814 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { Fallback } from './fallback'
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 9a007a727..cb5d005f8 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-badge`
@@ -7,12 +8,12 @@ const classPrefix = `adm-badge`
 export const dot = <React.Fragment />
 
 export type BadgeProps = {
-  content?: React.ReactNode | typeof dot
+  content?: ReactNode | typeof dot
   color?: string
   bordered?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   wrapperClassName?: string
-  wrapperStyle?: React.CSSProperties
+  wrapperStyle?: CSSProperties
 } & NativeProps<'--right' | '--top' | '--color'>
 
 export const Badge: FC<BadgeProps> = props => {
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 90cb52104..953104569 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,4 +1,10 @@
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import type {
+  ReactNode,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  MouseEventHandler,
+} from 'react'
 import classNames from 'classnames'
 import DotLoading from '../dot-loading'
 import { mergeProps } from '../../utils/with-default-props'
@@ -7,8 +13,8 @@ import { isPromise } from '../../utils/validate'
 
 const classPrefix = `adm-button`
 
-type NativeButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
+type NativeButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >
 
@@ -19,14 +25,14 @@ export type ButtonProps = {
   block?: boolean
   loading?: boolean | 'auto'
   loadingText?: string
-  loadingIcon?: React.ReactNode
+  loadingIcon?: ReactNode
   disabled?: boolean
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => void | Promise<void> | unknown
   type?: 'submit' | 'reset' | 'button'
   shape?: 'default' | 'rounded' | 'rectangular'
-  children?: React.ReactNode
+  children?: ReactNode
 } & Pick<
   NativeButtonProps,
   'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id'
@@ -68,7 +74,7 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
     },
   }))
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = async e => {
     if (!props.onClick) return
 
     const promise = props.onClick(e)
diff --git a/src/components/calendar/arrow-left-double.tsx b/src/components/calendar/arrow-left-double.tsx
index e47a37737..f61551e3d 100644
--- a/src/components/calendar/arrow-left-double.tsx
+++ b/src/components/calendar/arrow-left-double.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 
 export const ArrowLeftDouble: FC = () => {
   return (
diff --git a/src/components/calendar/arrow-left.tsx b/src/components/calendar/arrow-left.tsx
index 52bb68820..9de91aa61 100644
--- a/src/components/calendar/arrow-left.tsx
+++ b/src/components/calendar/arrow-left.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 
 export const ArrowLeft: FC = () => {
   return (
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 2ff6d9227..63e5a707d 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -1,10 +1,10 @@
 import React, {
   forwardRef,
-  ReactNode,
   useState,
   useImperativeHandle,
   useMemo,
 } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import dayjs from 'dayjs'
 import classNames from 'classnames'
@@ -32,14 +32,14 @@ export type CalendarRef = {
 }
 
 export type CalendarProps = {
-  prevMonthButton?: React.ReactNode
-  prevYearButton?: React.ReactNode
-  nextMonthButton?: React.ReactNode
-  nextYearButton?: React.ReactNode
+  prevMonthButton?: ReactNode
+  prevYearButton?: ReactNode
+  nextMonthButton?: ReactNode
+  nextYearButton?: ReactNode
   onPageChange?: (year: number, month: number) => void
   weekStartsOn?: 'Monday' | 'Sunday'
-  renderLabel?: (date: Date) => React.ReactNode
-  renderDate?: (date: Date) => React.ReactNode
+  renderLabel?: (date: Date) => ReactNode
+  renderDate?: (date: Date) => ReactNode
   allowClear?: boolean
   max?: Date
   min?: Date
diff --git a/src/components/capsule-tabs/capsule-tabs.tsx b/src/components/capsule-tabs/capsule-tabs.tsx
index 8b50f5842..b5d7b4fed 100644
--- a/src/components/capsule-tabs/capsule-tabs.tsx
+++ b/src/components/capsule-tabs/capsule-tabs.tsx
@@ -1,10 +1,5 @@
-import React, {
-  FC,
-  ReactNode,
-  ReactElement,
-  isValidElement,
-  useRef,
-} from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { animated } from '@react-spring/web'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -31,7 +26,7 @@ export type CapsuleTabsProps = {
   activeKey?: string | null
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index cd6e30998..b503beb25 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
@@ -7,14 +8,14 @@ const classPrefix = `adm-card`
 export type CardProps = {
   title?: ReactNode
   extra?: ReactNode
-  headerStyle?: React.CSSProperties
+  headerStyle?: CSSProperties
   headerClassName?: string
-  bodyStyle?: React.CSSProperties
+  bodyStyle?: CSSProperties
   bodyClassName?: string
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const Card: FC<CardProps> = props => {
diff --git a/src/components/cascade-picker-view/cascade-picker-view.tsx b/src/components/cascade-picker-view/cascade-picker-view.tsx
index 5badd0948..e86796840 100644
--- a/src/components/cascade-picker-view/cascade-picker-view.tsx
+++ b/src/components/cascade-picker-view/cascade-picker-view.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import PickerView from '../picker-view'
 import type { PickerViewProps } from '../picker-view'
 import type { CascadePickerOption } from '../cascade-picker'
diff --git a/src/components/cascade-picker/prompt.tsx b/src/components/cascade-picker/prompt.tsx
index 9d61c34e6..fec08c62e 100644
--- a/src/components/cascade-picker/prompt.tsx
+++ b/src/components/cascade-picker/prompt.tsx
@@ -1,5 +1,6 @@
 import { CascadePicker, CascadePickerProps } from './cascade-picker'
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import type { PickerValue } from '../picker'
 
diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx
index fdabd8254..989724726 100644
--- a/src/components/cascader-view/cascader-view.tsx
+++ b/src/components/cascader-view/cascader-view.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import Tabs from '../tabs'
 import CheckList from '../check-list'
@@ -10,17 +11,22 @@ import { useConfig } from '../config-provider'
 import { optionSkeleton } from './option-skeleton'
 import Skeleton from '../skeleton'
 import { useUpdateEffect } from 'ahooks'
+import { useFieldNames } from '../../hooks'
+import type { FieldNamesType } from '../../hooks'
 
 const classPrefix = `adm-cascader-view`
 
 export type CascaderValue = string
 
+type BaseOptionType = {
+  [key: string]: any
+}
 export type CascaderOption = {
   label: string
   value: string
   disabled?: boolean
   children?: CascaderOption[]
-}
+} & BaseOptionType
 
 export type CascaderValueExtend = {
   items: (CascaderOption | null)[]
@@ -36,6 +42,7 @@ export type CascaderViewProps = {
   onTabsChange?: (index: number) => void
   activeIcon?: ReactNode
   loading?: boolean
+  fieldNames?: FieldNamesType
 } & NativeProps<'--height'>
 
 const defaultProps = {
@@ -43,40 +50,41 @@ const defaultProps = {
 }
 
 export const CascaderView: FC<CascaderViewProps> = p => {
-  const { locale } = useConfig()
   const props = mergeProps(defaultProps, p)
-  const placeholder = props.placeholder || locale.Cascader.placeholder
+
+  const { locale } = useConfig()
+  const generateValueExtend = useCascaderValueExtend(props.options)
+  const [labelName, valueName, disabledName, childrenName] = useFieldNames(
+    props.fieldNames
+  )
+
   const [value, setValue] = usePropsValue({
     ...props,
     onChange: val => {
       props.onChange?.(val, generateValueExtend(val))
     },
   })
-  const [tabActiveIndex, setTabActiveIndex] = useState<number>(0)
-  useUpdateEffect(() => {
-    props.onTabsChange?.(tabActiveIndex)
-  }, [tabActiveIndex])
-
-  const generateValueExtend = useCascaderValueExtend(props.options)
+  const [tabActiveIndex, setTabActiveIndex] = useState(0)
 
   const levels = useMemo(() => {
     const ret: {
       selected: CascaderOption | undefined
       options: CascaderOption[]
     }[] = []
+
     let currentOptions = props.options
     let reachedEnd = false
     for (const v of value) {
-      const target = currentOptions.find(option => option.value === v)
+      const target = currentOptions.find(option => option[valueName] === v)
       ret.push({
         selected: target,
         options: currentOptions,
       })
-      if (!target || !target.children) {
+      if (!target || !target[childrenName]) {
         reachedEnd = true
         break
       }
-      currentOptions = target.children
+      currentOptions = target[childrenName]
     }
     if (!reachedEnd) {
       ret.push({
@@ -87,6 +95,9 @@ export const CascaderView: FC<CascaderViewProps> = p => {
     return ret
   }, [value, props.options])
 
+  useUpdateEffect(() => {
+    props.onTabsChange?.(tabActiveIndex)
+  }, [tabActiveIndex])
   useEffect(() => {
     setTabActiveIndex(levels.length - 1)
   }, [value])
@@ -104,9 +115,12 @@ export const CascaderView: FC<CascaderViewProps> = p => {
     }
     setValue(next)
   }
+
   const whetherLoading = <T extends unknown[]>(options: T) =>
     props.loading || options === optionSkeleton
 
+  const placeholder = props.placeholder || locale.Cascader.placeholder
+
   return withNativeProps(
     props,
     <div className={classPrefix}>
@@ -127,7 +141,7 @@ export const CascaderView: FC<CascaderViewProps> = p => {
               title={
                 <div className={`${classPrefix}-header-title`}>
                   {selected
-                    ? selected.label
+                    ? selected[labelName]
                     : typeof placeholder === 'function'
                     ? placeholder(index)
                     : placeholder}
@@ -164,17 +178,17 @@ export const CascaderView: FC<CascaderViewProps> = p => {
                     activeIcon={props.activeIcon}
                   >
                     {level.options.map(option => {
-                      const active = value[index] === option.value
+                      const active = value[index] === option[valueName]
                       return (
                         <CheckList.Item
-                          value={option.value}
-                          key={option.value}
-                          disabled={option.disabled}
+                          value={option[valueName]}
+                          key={option[valueName]}
+                          disabled={option[disabledName]}
                           className={classNames(`${classPrefix}-item`, {
                             [`${classPrefix}-item-active`]: active,
                           })}
                         >
-                          {option.label}
+                          {option[labelName]}
                         </CheckList.Item>
                       )
                     })}
diff --git a/src/components/cascader-view/index.en.md b/src/components/cascader-view/index.en.md
index f6cbc73f0..e383a5d87 100644
--- a/src/components/cascader-view/index.en.md
+++ b/src/components/cascader-view/index.en.md
@@ -14,6 +14,7 @@ CascaderView is the content area of [Cascader](/components/cascader).
 | --- | --- | --- | --- |
 | activeIcon | The icon displayed when selected | `ReactNode` | - |
 | defaultValue | Default selected options | `CascaderValue[]` | `[]` |
+| fieldNames | Custom field name for label and value and disabled and children | `{ label: string, value: string, disabled: string, children: string }` | `{ label: 'label', value: 'value',disabled:'disabled', children: 'children' }` |
 | onChange | Triggered when the selected options are changed | `(value: CascaderValue[], extend: CascaderValueExtend) => void` | - |
 | onTabsChange | Callback when switching panel | `(index: number) => void` | - |
 | options | Data of the cascade options | `CascaderOption[]` | - |
diff --git a/src/components/cascader-view/index.zh.md b/src/components/cascader-view/index.zh.md
index 779d3c93b..047d0b588 100644
--- a/src/components/cascader-view/index.zh.md
+++ b/src/components/cascader-view/index.zh.md
@@ -14,6 +14,7 @@ CascaderView 是 [Cascader](/zh/components/cascader) 的内容区域。
 | --- | --- | --- | --- |
 | activeIcon | 选中图标 | `ReactNode` | - |
 | defaultValue | 默认选中项 | `CascaderValue[]` | `[]` |
+| fieldNames | 自定义 options 中 label value disabled children 的字段 | `{ label: string, value: string, disabled: string, children: string }` | `{ label: 'label', value: 'value',disabled:'disabled', children: 'children' }` |
 | onChange | 选项改变时触发 | `(value: CascaderValue[], extend: CascaderValueExtend) => void` | - |
 | onTabsChange | 切换面板的回调 | `(index: number) => void` | - |
 | options | 配置每一列的选项 | `CascaderOption[]` | - |
diff --git a/src/components/cascader/cascader.tsx b/src/components/cascader/cascader.tsx
index 3d4a8a0e4..8d0fe4ebb 100644
--- a/src/components/cascader/cascader.tsx
+++ b/src/components/cascader/cascader.tsx
@@ -17,6 +17,7 @@ import { usePropsValue } from '../../utils/use-props-value'
 import CascaderView from '../cascader-view'
 import { useConfig } from '../config-provider'
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend'
+import type { FieldNamesType } from '../../hooks'
 
 const classPrefix = `adm-cascader`
 
@@ -47,6 +48,7 @@ export type CascaderProps = {
   ) => ReactNode
   onTabsChange?: (index: number) => void
   activeIcon?: ReactNode
+  fieldNames?: FieldNamesType
 } & Pick<
   PopupProps,
   | 'getContainer'
diff --git a/src/components/cascader/prompt.tsx b/src/components/cascader/prompt.tsx
index 825223574..6e31adb1a 100644
--- a/src/components/cascader/prompt.tsx
+++ b/src/components/cascader/prompt.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import { Cascader } from './cascader'
 import type { CascaderProps, CascaderValue } from './index'
diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx
index 7277a389c..c4d8a88a0 100644
--- a/src/components/center-popup/center-popup.tsx
+++ b/src/components/center-popup/center-popup.tsx
@@ -1,4 +1,5 @@
-import React, { FC, PropsWithChildren, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import { renderToContainer } from '../../utils/render-to-container'
 import Mask from '../mask'
 import { withStopPropagation } from '../../utils/with-stop-propagation'
diff --git a/src/components/check-list/check-list-item.tsx b/src/components/check-list/check-list-item.tsx
index 27a7600e6..74c6aefeb 100644
--- a/src/components/check-list/check-list-item.tsx
+++ b/src/components/check-list/check-list-item.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useContext } from 'react'
+import React, { useContext } from 'react'
+import type { FC } from 'react'
 import List, { ListItemProps } from '../list'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { CheckListContext } from './context'
diff --git a/src/components/check-list/check-list.tsx b/src/components/check-list/check-list.tsx
index 2ed6db1fe..24bd23466 100644
--- a/src/components/check-list/check-list.tsx
+++ b/src/components/check-list/check-list.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import List, { ListProps } from '../list'
 import { mergeProps } from '../../utils/with-default-props'
@@ -17,7 +18,7 @@ export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
   extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 const defaultProps = {
diff --git a/src/components/check-list/context.tsx b/src/components/check-list/context.tsx
index 2dd2e8909..f75b7cfcc 100644
--- a/src/components/check-list/context.tsx
+++ b/src/components/check-list/context.tsx
@@ -1,4 +1,5 @@
-import { createContext, ReactNode } from 'react'
+import { createContext } from 'react'
+import type { ReactNode } from 'react'
 
 export const CheckListContext = createContext<{
   value: string[]
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index f3c7f8719..e630ecf9e 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, useContext, useImperativeHandle } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import { CheckboxGroupContext } from './group-context'
@@ -23,8 +24,8 @@ export type CheckboxProps = {
   indeterminate?: boolean
   block?: boolean
   id?: string
-  icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode
-  children?: React.ReactNode
+  icon?: (checked: boolean, indeterminate: boolean) => ReactNode
+  children?: ReactNode
   onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>
 
diff --git a/src/components/checkbox/demos/demo3.tsx b/src/components/checkbox/demos/demo3.tsx
index fcf8a3b55..b1028330b 100644
--- a/src/components/checkbox/demos/demo3.tsx
+++ b/src/components/checkbox/demos/demo3.tsx
@@ -1,4 +1,5 @@
-import React, { FC, PropsWithChildren, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import { Checkbox, List } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import { CheckboxRef } from '../checkbox'
diff --git a/src/components/checkbox/group.tsx b/src/components/checkbox/group.tsx
index b59e1afe2..dfc0fe116 100644
--- a/src/components/checkbox/group.tsx
+++ b/src/components/checkbox/group.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { CheckboxValue } from '.'
 import { CheckboxGroupContext } from './group-context'
@@ -9,7 +10,7 @@ export interface CheckboxGroupProps {
   onChange?: (val: CheckboxValue[]) => void
   defaultValue?: CheckboxValue[]
   disabled?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 const defaultProps = {
diff --git a/src/components/checkbox/native-input.tsx b/src/components/checkbox/native-input.tsx
index 6120d4a51..6747260c9 100644
--- a/src/components/checkbox/native-input.tsx
+++ b/src/components/checkbox/native-input.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
+import type { FC } from 'react'
 import { useMemoizedFn } from 'ahooks'
 
 interface Props {
diff --git a/src/components/collapse/collapse.tsx b/src/components/collapse/collapse.tsx
index 02190e313..8e1901574 100644
--- a/src/components/collapse/collapse.tsx
+++ b/src/components/collapse/collapse.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactElement, isValidElement, useRef } from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import List from '../list'
 import { DownOutline } from 'antd-mobile-icons'
@@ -14,13 +15,13 @@ const classPrefix = `adm-collapse`
 
 export type CollapsePanelProps = {
   key: string
-  title: React.ReactNode
+  title: ReactNode
   disabled?: boolean
   forceRender?: boolean
   destroyOnClose?: boolean
   onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
-  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
-  children?: React.ReactNode
+  arrow?: ReactNode | ((active: boolean) => ReactNode)
+  children?: ReactNode
 } & NativeProps
 
 export const CollapsePanel: FC<CollapsePanelProps> = () => {
@@ -31,7 +32,7 @@ const CollapsePanelContent: FC<{
   visible: boolean
   forceRender: boolean
   destroyOnClose: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }> = props => {
   const { visible } = props
   const innerRef = useRef<HTMLDivElement>(null)
@@ -105,7 +106,7 @@ type ValueProps<T> = {
   activeKey?: T
   defaultActiveKey?: T
   onChange?: (activeKey: T) => void
-  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
+  arrow?: ReactNode | ((active: boolean) => ReactNode)
 }
 
 export type CollapseProps = (
@@ -116,7 +117,7 @@ export type CollapseProps = (
       accordion: true
     } & ValueProps<string | null>)
 ) & {
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const Collapse: FC<CollapseProps> = props => {
diff --git a/src/components/config-provider/config-provider.tsx b/src/components/config-provider/config-provider.tsx
index 3817ec02c..7b4d75f3f 100644
--- a/src/components/config-provider/config-provider.tsx
+++ b/src/components/config-provider/config-provider.tsx
@@ -1,10 +1,11 @@
-import React, { FC, useContext } from 'react'
+import React, { useContext } from 'react'
+import type { FC, ReactNode } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 
 type Config = {
   locale: Locale
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const defaultConfigRef: {
diff --git a/src/components/date-picker-view/date-picker-view.tsx b/src/components/date-picker-view/date-picker-view.tsx
index d876811a6..1d0d9c4dc 100644
--- a/src/components/date-picker-view/date-picker-view.tsx
+++ b/src/components/date-picker-view/date-picker-view.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import PickerView from '../picker-view'
 import type { PickerValue, PickerViewProps } from '../picker-view'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
diff --git a/src/components/date-picker/date-picker-week-utils.ts b/src/components/date-picker/date-picker-week-utils.ts
index d295cb168..e6022018c 100644
--- a/src/components/date-picker/date-picker-week-utils.ts
+++ b/src/components/date-picker/date-picker-week-utils.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import dayjs from 'dayjs'
 import isoWeek from 'dayjs/plugin/isoWeek'
 import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
index a9e632e77..dc76a7d71 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/date-picker/date-picker.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, ReactNode, useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
+import type { ReactNode } from 'react'
 import { useMemoizedFn } from 'ahooks'
 import Picker from '../picker'
 import type {
diff --git a/src/components/date-picker/prompt.tsx b/src/components/date-picker/prompt.tsx
index 95e40de28..4d2ec868c 100644
--- a/src/components/date-picker/prompt.tsx
+++ b/src/components/date-picker/prompt.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import { DatePicker, DatePickerProps } from './date-picker'
 import type { PickerDate } from './util'
diff --git a/src/components/dialog/alert.tsx b/src/components/dialog/alert.tsx
index ce667c9fd..a21e6b71b 100644
--- a/src/components/dialog/alert.tsx
+++ b/src/components/dialog/alert.tsx
@@ -1,7 +1,7 @@
 import { show } from './show'
 import { DialogProps } from './index'
 import { mergeProps } from '../../utils/with-default-props'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { getDefaultConfig } from '../config-provider'
 
 export type DialogAlertProps = Omit<
diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
index 74f164e5c..a24dd2e94 100644
--- a/src/components/dialog/confirm.tsx
+++ b/src/components/dialog/confirm.tsx
@@ -1,6 +1,6 @@
 import { show } from './show'
 import { DialogProps } from './index'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { getDefaultConfig } from '../config-provider'
 
diff --git a/src/components/dialog/dialog-action-button.tsx b/src/components/dialog/dialog-action-button.tsx
index d279caeb4..fe8507615 100644
--- a/src/components/dialog/dialog-action-button.tsx
+++ b/src/components/dialog/dialog-action-button.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import Button from '../button'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 629b4d77a..5f3a71854 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
 import { Action, DialogActionButton } from './dialog-action-button'
diff --git a/src/components/divider/divider.tsx b/src/components/divider/divider.tsx
index 797b91fbe..f227cf82a 100644
--- a/src/components/divider/divider.tsx
+++ b/src/components/divider/divider.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
@@ -8,7 +9,7 @@ const classPrefix = `adm-divider`
 export type DividerProps = {
   contentPosition?: 'left' | 'right' | 'center'
   direction?: 'horizontal' | 'vertical'
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 const defaultProps = {
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index ae76dc812..ad31f4f12 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -2,8 +2,6 @@ import { useClickAway } from 'ahooks'
 import classNames from 'classnames'
 import React, {
   cloneElement,
-  ReactElement,
-  ComponentProps,
   useEffect,
   useRef,
   useState,
@@ -11,6 +9,12 @@ import React, {
   useImperativeHandle,
   isValidElement,
 } from 'react'
+import type {
+  ReactNode,
+  ComponentProps,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import Popup, { PopupProps } from '../popup'
 import Item, { ItemChildrenWrap } from './item'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -26,7 +30,7 @@ export type DropdownProps = {
   closeOnMaskClick?: boolean
   closeOnClickAway?: boolean
   onChange?: (key: string | null) => void
-  arrow?: React.ReactNode
+  arrow?: ReactNode
   getContainer?: PopupProps['getContainer']
 } & NativeProps
 
@@ -41,123 +45,122 @@ export type DropdownRef = {
   close: () => void
 }
 
-const Dropdown = forwardRef<
-  DropdownRef,
-  React.PropsWithChildren<DropdownProps>
->((p, ref) => {
-  const props = mergeProps(defaultProps, p)
-  const [value, setValue] = usePropsValue({
-    value: props.activeKey,
-    defaultValue: props.defaultActiveKey,
-    onChange: props.onChange,
-  })
-
-  const navRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
+const Dropdown = forwardRef<DropdownRef, PropsWithChildren<DropdownProps>>(
+  (p, ref) => {
+    const props = mergeProps(defaultProps, p)
+    const [value, setValue] = usePropsValue({
+      value: props.activeKey,
+      defaultValue: props.defaultActiveKey,
+      onChange: props.onChange,
+    })
 
-  // 点击外部区域，关闭
-  useClickAway(() => {
-    if (!props.closeOnClickAway) return
-    setValue(null)
-  }, [navRef, contentRef])
+    const navRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
 
-  // 计算 navs 的 top 值
-  const [top, setTop] = useState<number>()
-  const containerRef = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-    if (value) {
-      const rect = container.getBoundingClientRect()
-      setTop(rect.bottom)
-    }
-  }, [value])
-
-  const changeActive = (key: string | null) => {
-    if (value === key) {
+    // 点击外部区域，关闭
+    useClickAway(() => {
+      if (!props.closeOnClickAway) return
       setValue(null)
-    } else {
-      setValue(key)
-    }
-  }
+    }, [navRef, contentRef])
 
-  let popupForceRender = false
-  const items: ReactElement<ComponentProps<typeof Item>>[] = []
-  const navs = React.Children.map(props.children, child => {
-    if (isValidElement<ComponentProps<typeof Item>>(child)) {
-      const childProps = {
-        ...child.props,
-        onClick: () => {
-          changeActive(child.key as string)
-        },
-        active: child.key === value,
-        arrow:
-          child.props.arrow === undefined ? props.arrow : child.props.arrow,
+    // 计算 navs 的 top 值
+    const [top, setTop] = useState<number>()
+    const containerRef = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+      const container = containerRef.current
+      if (!container) return
+      if (value) {
+        const rect = container.getBoundingClientRect()
+        setTop(rect.bottom)
       }
-      items.push(child)
-      if (child.props.forceRender) popupForceRender = true
-      return cloneElement(child, childProps)
-    } else {
-      return child
-    }
-  })
+    }, [value])
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      close: () => {
+    const changeActive = (key: string | null) => {
+      if (value === key) {
         setValue(null)
-      },
-    }),
-    [setValue]
-  )
+      } else {
+        setValue(key)
+      }
+    }
 
-  return withNativeProps(
-    props,
-    <div
-      className={classNames(classPrefix, {
-        [`${classPrefix}-open`]: !!value,
-      })}
-      ref={containerRef}
-    >
-      <div className={`${classPrefix}-nav`} ref={navRef}>
-        {navs}
-      </div>
-      <Popup
-        visible={!!value}
-        position='top'
-        getContainer={props.getContainer}
-        className={`${classPrefix}-popup`}
-        maskClassName={`${classPrefix}-popup-mask`}
-        bodyClassName={`${classPrefix}-popup-body`}
-        style={{ top }}
-        forceRender={popupForceRender}
-        onMaskClick={
-          props.closeOnMaskClick
-            ? () => {
-                changeActive(null)
-              }
-            : undefined
+    let popupForceRender = false
+    const items: ReactElement<ComponentProps<typeof Item>>[] = []
+    const navs = React.Children.map(props.children, child => {
+      if (isValidElement<ComponentProps<typeof Item>>(child)) {
+        const childProps = {
+          ...child.props,
+          onClick: () => {
+            changeActive(child.key as string)
+          },
+          active: child.key === value,
+          arrow:
+            child.props.arrow === undefined ? props.arrow : child.props.arrow,
         }
+        items.push(child)
+        if (child.props.forceRender) popupForceRender = true
+        return cloneElement(child, childProps)
+      } else {
+        return child
+      }
+    })
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: () => {
+          setValue(null)
+        },
+      }),
+      [setValue]
+    )
+
+    return withNativeProps(
+      props,
+      <div
+        className={classNames(classPrefix, {
+          [`${classPrefix}-open`]: !!value,
+        })}
+        ref={containerRef}
       >
-        <div ref={contentRef}>
-          {items.map(item => {
-            const isActive = item.key === value
-            return (
-              <ItemChildrenWrap
-                key={item.key}
-                active={isActive}
-                forceRender={item.props.forceRender}
-                destroyOnClose={item.props.destroyOnClose}
-              >
-                {item.props.children}
-              </ItemChildrenWrap>
-            )
-          })}
+        <div className={`${classPrefix}-nav`} ref={navRef}>
+          {navs}
         </div>
-      </Popup>
-    </div>
-  )
-})
+        <Popup
+          visible={!!value}
+          position='top'
+          getContainer={props.getContainer}
+          className={`${classPrefix}-popup`}
+          maskClassName={`${classPrefix}-popup-mask`}
+          bodyClassName={`${classPrefix}-popup-body`}
+          style={{ top }}
+          forceRender={popupForceRender}
+          onMaskClick={
+            props.closeOnMaskClick
+              ? () => {
+                  changeActive(null)
+                }
+              : undefined
+          }
+        >
+          <div ref={contentRef}>
+            {items.map(item => {
+              const isActive = item.key === value
+              return (
+                <ItemChildrenWrap
+                  key={item.key}
+                  active={isActive}
+                  forceRender={item.props.forceRender}
+                  destroyOnClose={item.props.destroyOnClose}
+                >
+                  {item.props.children}
+                </ItemChildrenWrap>
+              )
+            })}
+          </div>
+        </Popup>
+      </div>
+    )
+  }
+)
 
 export default Dropdown
diff --git a/src/components/dropdown/item.tsx b/src/components/dropdown/item.tsx
index 43b4026ab..afa8c5ff1 100644
--- a/src/components/dropdown/item.tsx
+++ b/src/components/dropdown/item.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { useShouldRender } from '../../utils/should-render'
 import { DownFill } from 'antd-mobile-icons'
@@ -8,14 +9,14 @@ const classPrefix = `adm-dropdown-item`
 
 export type DropdownItemProps = {
   key: string
-  title: React.ReactNode
+  title: ReactNode
   active?: boolean
   highlight?: boolean
   forceRender?: boolean
   destroyOnClose?: boolean
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  arrow?: React.ReactNode
-  children?: React.ReactNode
+  arrow?: ReactNode
+  children?: ReactNode
 } & NativeProps
 
 const Item: FC<DropdownItemProps> = props => {
diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
index 355f82f1c..a1c98b970 100644
--- a/src/components/ellipsis/ellipsis.tsx
+++ b/src/components/ellipsis/ellipsis.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useMemo, useRef, useState } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import runes from 'runes2'
 import { mergeProps } from '../../utils/with-default-props'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -15,8 +16,8 @@ export type EllipsisProps = {
   content: string
   direction?: 'start' | 'end' | 'middle'
   rows?: number
-  expandText?: React.ReactNode
-  collapseText?: React.ReactNode
+  expandText?: ReactNode
+  collapseText?: ReactNode
   stopPropagationForActionButtons?: PropagationEvent[]
   onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   defaultExpanded?: boolean
diff --git a/src/components/empty/empty-icon.tsx b/src/components/empty/empty-icon.tsx
index a25c3e282..54500b7b9 100644
--- a/src/components/empty/empty-icon.tsx
+++ b/src/components/empty/empty-icon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 export const EmptyIcon: FC<NativeProps> = props => {
diff --git a/src/components/empty/empty.tsx b/src/components/empty/empty.tsx
index 5264293b6..28f7dc151 100644
--- a/src/components/empty/empty.tsx
+++ b/src/components/empty/empty.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { EmptyIcon } from './empty-icon'
@@ -7,12 +8,12 @@ const classPrefix = `adm-empty`
 
 export type EmptyProps = {
   image?: ReactNode
-  imageStyle?: React.CSSProperties
+  imageStyle?: CSSProperties
   description?: ReactNode
 } & NativeProps
 
 /** @deprecated Empty has been deprecated and will be removed in the next major version. */
-export const Empty: React.FC<EmptyProps> = props => {
+export const Empty: FC<EmptyProps> = props => {
   function renderImageNode() {
     const { image } = props
     if (image === undefined) {
diff --git a/src/components/error-block/create-error-block.tsx b/src/components/error-block/create-error-block.tsx
index 6b920c241..20ad1e528 100644
--- a/src/components/error-block/create-error-block.tsx
+++ b/src/components/error-block/create-error-block.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactElement, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { mergeProps } from '../../utils/with-default-props'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -13,7 +14,7 @@ export type ErrorBlockProps = {
   image?: string | ReactElement
   description?: ReactNode
   fullPage?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<
   | '--image-height'
   | '--image-height-full-page'
diff --git a/src/components/error-block/error-block.tsx b/src/components/error-block/error-block.tsx
index 7af9782e0..2f6dbf2b4 100644
--- a/src/components/error-block/error-block.tsx
+++ b/src/components/error-block/error-block.tsx
@@ -1,5 +1,5 @@
 import { createErrorBlock } from './create-error-block'
-import { ReactElement } from 'react'
+import type { ReactElement } from 'react'
 import {
   busyImage,
   defaultImage,
diff --git a/src/components/error-block/index.ts b/src/components/error-block/index.ts
index f40a004c7..4513ed95c 100644
--- a/src/components/error-block/index.ts
+++ b/src/components/error-block/index.ts
@@ -1,5 +1,5 @@
 import './error-block.less'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { ErrorBlock } from './error-block'
 
 export { createErrorBlock } from './create-error-block'
diff --git a/src/components/floating-bubble/floating-bubble.tsx b/src/components/floating-bubble/floating-bubble.tsx
index e77e44b22..3fd07f80f 100644
--- a/src/components/floating-bubble/floating-bubble.tsx
+++ b/src/components/floating-bubble/floating-bubble.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useRef, useEffect, useState } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import { useSpring, animated, to } from '@react-spring/web'
 import { useDrag } from '@use-gesture/react'
 import { mergeProps } from '../../utils/with-default-props'
@@ -12,7 +13,7 @@ export type FloatingBubbleProps = {
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   axis?: 'x' | 'y' | 'xy' | 'lock'
   magnetic?: 'x' | 'y'
-  children?: React.ReactNode
+  children?: ReactNode
   offset?: Offset
   defaultOffset?: Offset
   onOffsetChange?: (offset: Offset) => void
diff --git a/src/components/floating-panel/floating-panel.tsx b/src/components/floating-panel/floating-panel.tsx
index de942397a..7a15fa598 100644
--- a/src/components/floating-panel/floating-panel.tsx
+++ b/src/components/floating-panel/floating-panel.tsx
@@ -1,10 +1,5 @@
-import React, {
-  forwardRef,
-  ReactNode,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { useDrag } from '@use-gesture/react'
 import { useSpring, animated } from '@react-spring/web'
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 88e9a419c..13c70c241 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/form/demos/demo4.tsx b/src/components/form/demos/demo4.tsx
index 8651692c5..4d3e76679 100644
--- a/src/components/form/demos/demo4.tsx
+++ b/src/components/form/demos/demo4.tsx
@@ -1,4 +1,5 @@
-import React, { useState, FC } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { Form, Input, Button, Picker, Space } from 'antd-mobile'
 import type { PickerValue } from 'antd-mobile/es/components/picker'
 import { DownOutline } from 'antd-mobile-icons'
diff --git a/src/components/form/demos/demo6.tsx b/src/components/form/demos/demo6.tsx
index 1e3ecf597..832668cfb 100644
--- a/src/components/form/demos/demo6.tsx
+++ b/src/components/form/demos/demo6.tsx
@@ -1,12 +1,13 @@
 import { Button, Form, Input, Toast } from 'antd-mobile'
 import { InputRef } from 'antd-mobile/es/components/input'
 import React, { useRef } from 'react'
+import type { ReactNode } from 'react'
 
 class Age extends React.Component {
   log = () => {
     Toast.show('class 组件 Ref 测试')
   }
-  render(): React.ReactNode {
+  render(): ReactNode {
     return <Input {...this.props} />
   }
 }
diff --git a/src/components/form/form-array.tsx b/src/components/form/form-array.tsx
index 64c07a5ed..5e93575dd 100644
--- a/src/components/form/form-array.tsx
+++ b/src/components/form/form-array.tsx
@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import type { StoreValue } from 'rc-field-form/es/interface'
 import { List as RCList } from 'rc-field-form'
 import List from '../list'
@@ -29,7 +30,7 @@ export interface FormArrayProps {
   ) => ReactElement[]
 }
 
-export const FormArray: React.FC<FormArrayProps> = props => {
+export const FormArray: FC<FormArrayProps> = props => {
   return (
     <RCList name={props.name} initialValue={props.initialValue}>
       {(rcFields, operation) => {
diff --git a/src/components/form/form-item.tsx b/src/components/form/form-item.tsx
index 239d410e5..26993dd24 100644
--- a/src/components/form/form-item.tsx
+++ b/src/components/form/form-item.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useContext, useCallback, useState, useRef } from 'react'
+import React, { useContext, useCallback, useState, useRef } from 'react'
+import type { FC, ReactNode, MutableRefObject } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { Field, FormInstance } from 'rc-field-form'
@@ -17,10 +18,8 @@ import { undefinedFallback } from '../../utils/undefined-fallback'
 
 const NAME_SPLIT = '__SPLIT__'
 
-type RenderChildren<Values = any> = (
-  form: FormInstance<Values>
-) => React.ReactNode
-type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode
+type RenderChildren<Values = any> = (form: FormInstance<Values>) => ReactNode
+type ChildrenType<Values = any> = RenderChildren<Values> | ReactNode
 
 type RcFieldProps = Omit<FieldProps, 'children'>
 
@@ -47,8 +46,8 @@ export type FormItemProps = Pick<
     ListItemProps,
     'style' | 'extra' | 'clickable' | 'arrow' | 'description'
   > & {
-    label?: React.ReactNode
-    help?: React.ReactNode
+    label?: ReactNode
+    help?: ReactNode
     hasFeedback?: boolean
     required?: boolean
     noStyle?: boolean
@@ -57,16 +56,13 @@ export type FormItemProps = Pick<
     layout?: FormLayout
     childElementPosition?: 'normal' | 'right'
     children?: ChildrenType
-    onClick?: (
-      e: React.MouseEvent,
-      widgetRef: React.MutableRefObject<any>
-    ) => void
+    onClick?: (e: React.MouseEvent, widgetRef: MutableRefObject<any>) => void
   } & NativeProps
 
 interface MemoInputProps {
   value: any
   update: number
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const MemoInput = React.memo(
@@ -95,10 +91,10 @@ type FormItemLayoutProps = Pick<
   htmlFor?: string
   errors: string[]
   warnings: string[]
-  children: React.ReactNode
+  children: ReactNode
 } & NativeProps
 
-const FormItemLayout: React.FC<FormItemLayoutProps> = props => {
+const FormItemLayout: FC<FormItemLayoutProps> = props => {
   const {
     className,
     style,
@@ -300,7 +296,7 @@ export const FormItem: FC<FormItemProps> = props => {
   )
 
   function renderLayout(
-    baseChildren: React.ReactNode,
+    baseChildren: ReactNode,
     fieldId?: string,
     meta?: Meta,
     isRequired?: boolean
@@ -394,7 +390,7 @@ export const FormItem: FC<FormItemProps> = props => {
       messageVariables={Variables}
     >
       {(control, meta, context) => {
-        let childNode: React.ReactNode = null
+        let childNode: ReactNode = null
 
         const isRequired =
           required !== undefined
diff --git a/src/components/form/form-subscribe.tsx b/src/components/form/form-subscribe.tsx
index 8f74fb6d9..deab7f117 100644
--- a/src/components/form/form-subscribe.tsx
+++ b/src/components/form/form-subscribe.tsx
@@ -1,4 +1,5 @@
-import React, { FC, memo, useContext } from 'react'
+import React, { memo, useContext } from 'react'
+import type { FC, ReactNode } from 'react'
 import { FieldContext, useWatch } from 'rc-field-form'
 import { useUpdate } from 'ahooks'
 import type { FormInstance } from 'rc-field-form'
@@ -8,7 +9,7 @@ import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-upda
 type RenderChildren<Values = any> = (
   changedValues: Record<string, any>,
   form: FormInstance<Values>
-) => React.ReactNode
+) => ReactNode
 type ChildrenType<Values = any> = RenderChildren<Values>
 
 export interface FormSubscribeProps {
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index b054a1ea2..a92bf6b8c 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, forwardRef, ForwardedRef, useMemo } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+import type { ReactNode, ForwardedRef } from 'react'
 import classNames from 'classnames'
 import { NativeProps } from '../../utils/native-props'
 import List, { ListProps } from '../list'
diff --git a/src/components/form/header.tsx b/src/components/form/header.tsx
index fa5e4b752..14eb0f4dc 100644
--- a/src/components/form/header.tsx
+++ b/src/components/form/header.tsx
@@ -1,3 +1,3 @@
-import { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
 
 export const Header: FC<{ children?: ReactNode }> = () => null
diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx
index 62f9b3851..735093e65 100644
--- a/src/components/grid/grid.tsx
+++ b/src/components/grid/grid.tsx
@@ -1,5 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props'
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { toCSSLength } from '../../utils/to-css-length'
 
@@ -8,7 +9,7 @@ const classPrefix = `adm-grid`
 export type GridProps = {
   columns: number
   gap?: number | string | [number | string, number | string]
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>
 
 export const Grid: FC<GridProps> = props => {
@@ -36,10 +37,10 @@ export const Grid: FC<GridProps> = props => {
 export type GridItemProps = {
   span?: number
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
-type GridItemStyle = React.CSSProperties &
+type GridItemStyle = CSSProperties &
   Record<'--item-span', GridItemProps['span']>
 
 export const GridItem: FC<GridItemProps> = p => {
diff --git a/src/components/image-uploader/demos/demo1.tsx b/src/components/image-uploader/demos/demo1.tsx
index d6b478148..5d06a27c3 100644
--- a/src/components/image-uploader/demos/demo1.tsx
+++ b/src/components/image-uploader/demos/demo1.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { ImageUploader, Space, Toast, Dialog } from 'antd-mobile'
 import { DemoBlock, DemoDescription } from 'demos'
 import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
diff --git a/src/components/image-uploader/demos/demo2.tsx b/src/components/image-uploader/demos/demo2.tsx
index a7f1606f0..5a2509e61 100644
--- a/src/components/image-uploader/demos/demo2.tsx
+++ b/src/components/image-uploader/demos/demo2.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { DemoBlock } from 'demos'
 import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
 import { ImageUploader } from 'antd-mobile'
diff --git a/src/components/image-uploader/image-uploader.tsx b/src/components/image-uploader/image-uploader.tsx
index c38bd34d3..38aef6eef 100644
--- a/src/components/image-uploader/image-uploader.tsx
+++ b/src/components/image-uploader/image-uploader.tsx
@@ -1,9 +1,10 @@
-import React, {
+import React, { useRef, useState } from 'react'
+import type {
   FC,
+  ReactNode,
   InputHTMLAttributes,
-  useRef,
-  useState,
   CSSProperties,
+  ReactElement,
 } from 'react'
 import { AddOutline, CloseOutline } from 'antd-mobile-icons'
 import { mergeProps } from '../../utils/with-default-props'
@@ -49,7 +50,7 @@ export type ImageUploaderProps = {
   disableUpload?: boolean
   showUpload?: boolean
   deletable?: boolean
-  deleteIcon?: React.ReactNode
+  deleteIcon?: ReactNode
   capture?: InputHTMLAttributes<unknown>['capture']
   onPreview?: (index: number, item: ImageUploadItem) => void
   beforeUpload?: (
@@ -61,12 +62,12 @@ export type ImageUploaderProps = {
   preview?: boolean
   showFailed?: boolean
   imageFit?: ImageProps['fit']
-  children?: React.ReactNode
+  children?: ReactNode
   renderItem?: (
-    originNode: React.ReactElement,
+    originNode: ReactElement,
     file: ImageUploadItem,
     fileList: ImageUploadItem[]
-  ) => React.ReactNode
+  ) => ReactNode
 } & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>
 
 const classPrefix = `adm-image-uploader`
diff --git a/src/components/image-uploader/preview-item.tsx b/src/components/image-uploader/preview-item.tsx
index cfba2c10d..d477b70a8 100644
--- a/src/components/image-uploader/preview-item.tsx
+++ b/src/components/image-uploader/preview-item.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { TaskStatus } from './image-uploader'
 import Image from '../image'
@@ -10,7 +11,7 @@ type Props = {
   onClick?: () => void
   onDelete?: () => void
   deletable: boolean
-  deleteIcon: React.ReactNode
+  deleteIcon: ReactNode
   url?: string
   file?: File
   status?: TaskStatus
diff --git a/src/components/image-viewer/image-viewer.tsx b/src/components/image-viewer/image-viewer.tsx
index 47cfea47a..e1558b395 100644
--- a/src/components/image-viewer/image-viewer.tsx
+++ b/src/components/image-viewer/image-viewer.tsx
@@ -1,12 +1,11 @@
 import React, {
-  FC,
   forwardRef,
   useImperativeHandle,
   useRef,
   useState,
   useCallback,
 } from 'react'
-
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import {
   GetContainer,
@@ -26,7 +25,7 @@ export type ImageViewerProps = {
   visible?: boolean
   onClose?: () => void
   afterClose?: () => void
-  renderFooter?: (image: string) => React.ReactNode
+  renderFooter?: (image: string) => ReactNode
 }
 
 const defaultProps = {
@@ -77,7 +76,7 @@ export type MultiImageViewerProps = Omit<
   images?: string[]
   defaultIndex?: number
   onIndexChange?: (index: number) => void
-  renderFooter?: (image: string, index: number) => React.ReactNode
+  renderFooter?: (image: string, index: number) => ReactNode
 }
 
 const multiDefaultProps = {
diff --git a/src/components/image-viewer/slide.tsx b/src/components/image-viewer/slide.tsx
index d9bfa2e83..d29fe97ba 100644
--- a/src/components/image-viewer/slide.tsx
+++ b/src/components/image-viewer/slide.tsx
@@ -1,4 +1,5 @@
-import React, { FC, MutableRefObject, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { FC, MutableRefObject } from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { useSize } from 'ahooks'
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband'
@@ -196,7 +197,6 @@ export const Slide: FC<Props> = props => {
     {
       target: controlRef,
       drag: {
-        // filterTaps: true,
         from: () => [
           mat.getTranslateX(matrix.get()),
           mat.getTranslateY(matrix.get()),
diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index abf2e57fe..ec6fcd6c6 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -1,5 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props'
-import React, { ReactNode, useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { staged } from 'staged-components'
 import { toCSSLength } from '../../utils/to-css-length'
diff --git a/src/components/image/lazy-detector.tsx b/src/components/image/lazy-detector.tsx
index 05fa09212..59b277cf9 100644
--- a/src/components/image/lazy-detector.tsx
+++ b/src/components/image/lazy-detector.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
+import type { FC } from 'react'
 import { useInViewport } from 'ahooks'
 
 type Props = {
diff --git a/src/components/index-bar/demos/demo3.tsx b/src/components/index-bar/demos/demo3.tsx
index 6fd4236b2..2892b4cdd 100644
--- a/src/components/index-bar/demos/demo3.tsx
+++ b/src/components/index-bar/demos/demo3.tsx
@@ -49,7 +49,6 @@ export default () => {
               <IndexBar.Panel
                 // 打开下方 index 中的任一个
                 index={title}
-                // index={`区域`}
                 title={`标题${title}`}
                 key={`标题${title}`}
               >
diff --git a/src/components/index-bar/index-bar.tsx b/src/components/index-bar/index-bar.tsx
index 58e2936bc..013d816db 100644
--- a/src/components/index-bar/index-bar.tsx
+++ b/src/components/index-bar/index-bar.tsx
@@ -1,11 +1,5 @@
-import React, {
-  forwardRef,
-  useRef,
-  useState,
-  useImperativeHandle,
-  ReactElement,
-  ReactNode,
-} from 'react'
+import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react'
+import type { ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { useThrottleFn } from 'ahooks'
@@ -21,7 +15,7 @@ const classPrefix = `adm-index-bar`
 export type IndexBarProps = {
   sticky?: boolean
   onIndexChange?: (index: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<'--sticky-offset-top'>
 
 export type IndexBarRef = {
diff --git a/src/components/index-bar/panel.tsx b/src/components/index-bar/panel.tsx
index c76eadf80..a52d2d816 100644
--- a/src/components/index-bar/panel.tsx
+++ b/src/components/index-bar/panel.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps } from '../../utils/native-props'
 
 export type IndexBarPanelProps = {
diff --git a/src/components/index-bar/sidebar.tsx b/src/components/index-bar/sidebar.tsx
index b62668cb9..194b3187b 100644
--- a/src/components/index-bar/sidebar.tsx
+++ b/src/components/index-bar/sidebar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
 const classPrefix = `adm-index-bar`
diff --git a/src/components/infinite-scroll/demos/demo2.tsx b/src/components/infinite-scroll/demos/demo2.tsx
index 5deb49537..3a39dface 100644
--- a/src/components/infinite-scroll/demos/demo2.tsx
+++ b/src/components/infinite-scroll/demos/demo2.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties, useState } from 'react'
+import React, { useState } from 'react'
+import type { CSSProperties } from 'react'
 import { List, Image, InfiniteScroll } from 'antd-mobile'
 import {
   List as VirtualizedList,
diff --git a/src/components/infinite-scroll/infinite-scroll.tsx b/src/components/infinite-scroll/infinite-scroll.tsx
index 9f19d89b5..c3469307c 100644
--- a/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/src/components/infinite-scroll/infinite-scroll.tsx
@@ -1,5 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props'
-import React, { FC, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import { useLockFn, useThrottleFn } from 'ahooks'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { getScrollParent } from '../../utils/get-scroll-parent'
@@ -17,12 +18,8 @@ export type InfiniteScrollProps = {
   hasMore: boolean
   threshold?: number
   children?:
-    | React.ReactNode
-    | ((
-        hasMore: boolean,
-        failed: boolean,
-        retry: () => void
-      ) => React.ReactNode)
+    | ReactNode
+    | ((hasMore: boolean, failed: boolean, retry: () => void) => ReactNode)
 } & NativeProps
 
 const defaultProps: Required<
diff --git a/src/components/jumbo-tabs/jumbo-tabs.tsx b/src/components/jumbo-tabs/jumbo-tabs.tsx
index 176c5026b..c00f4a0ca 100644
--- a/src/components/jumbo-tabs/jumbo-tabs.tsx
+++ b/src/components/jumbo-tabs/jumbo-tabs.tsx
@@ -1,10 +1,5 @@
-import React, {
-  FC,
-  ReactNode,
-  ReactElement,
-  isValidElement,
-  useRef,
-} from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { ReactNode, FC, ReactElement } from 'react'
 import classNames from 'classnames'
 import { animated } from '@react-spring/web'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -23,7 +18,7 @@ export type JumboTabProps = {
   disabled?: boolean
   forceRender?: boolean
   destroyOnClose?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const JumboTab: FC<JumboTabProps> = () => {
@@ -34,7 +29,7 @@ export type JumboTabsProps = {
   activeKey?: string | null
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const JumboTabs: FC<JumboTabsProps> = props => {
diff --git a/src/components/list/demos/demo4.tsx b/src/components/list/demos/demo4.tsx
index 197f83758..d03d45100 100644
--- a/src/components/list/demos/demo4.tsx
+++ b/src/components/list/demos/demo4.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import React from 'react'
+import type { CSSProperties } from 'react'
 import { List, Image } from 'antd-mobile'
 import { List as VirtualizedList, AutoSizer } from 'react-virtualized'
 
diff --git a/src/components/list/list-item.tsx b/src/components/list/list-item.tsx
index f1501e4dd..d005c59ee 100644
--- a/src/components/list/list-item.tsx
+++ b/src/components/list/list-item.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { RightOutline } from 'antd-mobile-icons'
 import classNames from 'classnames'
diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx
index bc7367708..ecce3614c 100644
--- a/src/components/list/list.tsx
+++ b/src/components/list/list.tsx
@@ -1,9 +1,5 @@
-import React, {
-  forwardRef,
-  ReactNode,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import type { ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/mask/demos/demo1.tsx b/src/components/mask/demos/demo1.tsx
index df65da9a8..6f30742dd 100644
--- a/src/components/mask/demos/demo1.tsx
+++ b/src/components/mask/demos/demo1.tsx
@@ -1,4 +1,5 @@
-import React, { useState, FC } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { Button, Mask, Space } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 
diff --git a/src/components/mask/mask.tsx b/src/components/mask/mask.tsx
index 8215324f8..9cc8a248a 100644
--- a/src/components/mask/mask.tsx
+++ b/src/components/mask/mask.tsx
@@ -1,5 +1,6 @@
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import React, { useMemo, useRef, useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import { useUnmountedRef } from 'ahooks'
 import { useLockScroll } from '../../utils/use-lock-scroll'
 import { useSpring, animated } from '@react-spring/web'
@@ -39,7 +40,7 @@ export type MaskProps = {
   afterShow?: () => void
   afterClose?: () => void
   stopPropagation?: PropagationEvent[]
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<'--z-index'>
 
 const defaultProps = {
@@ -53,7 +54,7 @@ const defaultProps = {
   stopPropagation: ['click'],
 }
 
-export const Mask: React.FC<MaskProps> = p => {
+export const Mask: FC<MaskProps> = p => {
   const props = mergeProps(defaultProps, p)
   const { locale } = useConfig()
 
diff --git a/src/components/modal/alert.tsx b/src/components/modal/alert.tsx
index fc587d76d..c4c38bd1e 100644
--- a/src/components/modal/alert.tsx
+++ b/src/components/modal/alert.tsx
@@ -1,7 +1,7 @@
 import { show } from './show'
 import { ModalProps } from './index'
 import { mergeProps } from '../../utils/with-default-props'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { getDefaultConfig } from '../config-provider'
 
 export type ModalAlertProps = Omit<
diff --git a/src/components/modal/confirm.tsx b/src/components/modal/confirm.tsx
index 16f14ae15..7898d1f05 100644
--- a/src/components/modal/confirm.tsx
+++ b/src/components/modal/confirm.tsx
@@ -1,6 +1,6 @@
 import { show } from './show'
 import { ModalProps } from './index'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { getDefaultConfig } from '../config-provider'
 
diff --git a/src/components/modal/modal-action-button.tsx b/src/components/modal/modal-action-button.tsx
index 534c9589b..8a634ed2c 100644
--- a/src/components/modal/modal-action-button.tsx
+++ b/src/components/modal/modal-action-button.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import Button from '../button'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 59a2e0900..b55b8b223 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
 import { Action, ModalActionButton } from './modal-action-button'
diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index 29035abbc..81ff6ef9c 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { LeftOutline } from 'antd-mobile-icons'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
diff --git a/src/components/notice-bar/notice-bar.tsx b/src/components/notice-bar/notice-bar.tsx
index 7b23fee1b..655cb462c 100644
--- a/src/components/notice-bar/notice-bar.tsx
+++ b/src/components/notice-bar/notice-bar.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef, memo } from 'react'
+import type { ReactNode } from 'react'
 import classNames from 'classnames'
 import { CloseOutline, SoundOutline } from 'antd-mobile-icons'
 import { useTimeout } from 'ahooks'
@@ -17,7 +18,7 @@ export type NoticeBarProps = {
   /** Scroll speed, unit px/s */
   speed?: number
   /** The content of the NoticeBar */
-  content: React.ReactNode
+  content: ReactNode
   /** Whether it can be closed */
   closeable?: boolean
   /** Callback when closed */
@@ -25,9 +26,9 @@ export type NoticeBarProps = {
   /** Event when click */
   onClick?: () => void
   /** Additional operating area, displayed to the left of the close button */
-  extra?: React.ReactNode
+  extra?: ReactNode
   /** Radio icon on the left */
-  icon?: React.ReactNode
+  icon?: ReactNode
   /** Whether to display multiple lines */
   wrap?: boolean
 } & NativeProps<
diff --git a/src/components/number-keyboard/number-keyboard.tsx b/src/components/number-keyboard/number-keyboard.tsx
index 49e947152..d09eec467 100644
--- a/src/components/number-keyboard/number-keyboard.tsx
+++ b/src/components/number-keyboard/number-keyboard.tsx
@@ -1,4 +1,5 @@
-import React, { useRef, useMemo, TouchEvent, MouseEvent } from 'react'
+import React, { useRef, useMemo } from 'react'
+import type { FC, TouchEvent, MouseEvent } from 'react'
 import classNames from 'classnames'
 import { DownOutline, TextDeletionOutline } from 'antd-mobile-icons'
 import { mergeProps } from '../../utils/with-default-props'
@@ -45,7 +46,7 @@ const defaultProps = {
   forceRender: false,
 }
 
-export const NumberKeyboard: React.FC<NumberKeyboardProps> = p => {
+export const NumberKeyboard: FC<NumberKeyboardProps> = p => {
   const props = mergeProps(defaultProps, p)
   const {
     visible,
diff --git a/src/components/page-indicator/page-indicator.tsx b/src/components/page-indicator/page-indicator.tsx
index b62efe799..6ad904ef8 100644
--- a/src/components/page-indicator/page-indicator.tsx
+++ b/src/components/page-indicator/page-indicator.tsx
@@ -1,4 +1,5 @@
-import React, { memo, ReactElement } from 'react'
+import React, { memo } from 'react'
+import type { ReactElement } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/passcode-input/passcode-input.tsx b/src/components/passcode-input/passcode-input.tsx
index c51b4b1f8..142907d92 100644
--- a/src/components/passcode-input/passcode-input.tsx
+++ b/src/components/passcode-input/passcode-input.tsx
@@ -4,8 +4,8 @@ import React, {
   useRef,
   forwardRef,
   useImperativeHandle,
-  ReactElement,
 } from 'react'
+import type { ReactElement } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import type { NumberKeyboardProps } from '../number-keyboard'
diff --git a/src/components/picker-view/picker-view.tsx b/src/components/picker-view/picker-view.tsx
index ea1810396..fc8259721 100644
--- a/src/components/picker-view/picker-view.tsx
+++ b/src/components/picker-view/picker-view.tsx
@@ -1,4 +1,5 @@
-import React, { memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import React, { memo, useCallback, useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { Wheel } from './wheel'
 import { useColumnsExtend } from './columns-extend'
diff --git a/src/components/picker-view/wheel.tsx b/src/components/picker-view/wheel.tsx
index ce8a0ac0c..225420fd3 100644
--- a/src/components/picker-view/wheel.tsx
+++ b/src/components/picker-view/wheel.tsx
@@ -1,4 +1,5 @@
-import React, { memo, ReactNode, useRef } from 'react'
+import React, { memo, useRef } from 'react'
+import type { ReactNode } from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import {
   EventTypes,
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
index 329fbfe34..22ad6d2b8 100644
--- a/src/components/picker/picker.tsx
+++ b/src/components/picker/picker.tsx
@@ -1,11 +1,11 @@
 import React, {
   useState,
   useEffect,
-  ReactNode,
   forwardRef,
   useImperativeHandle,
   memo,
 } from 'react'
+import type { ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
 import Popup, { PopupProps } from '../popup'
 import { mergeProps } from '../../utils/with-default-props'
@@ -58,7 +58,7 @@ export type PickerProps = {
   renderLabel?: (item: PickerColumnItem) => ReactNode
   mouseWheel?: boolean
   popupClassName?: string
-  popupStyle?: React.CSSProperties
+  popupStyle?: CSSProperties
 } & Pick<
   PopupProps,
   | 'getContainer'
diff --git a/src/components/picker/prompt.tsx b/src/components/picker/prompt.tsx
index 8c02e961a..66c2343b2 100644
--- a/src/components/picker/prompt.tsx
+++ b/src/components/picker/prompt.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import { Picker } from './picker'
 import type { PickerProps, PickerValue } from './index'
diff --git a/src/components/popover/demos/demo4.tsx b/src/components/popover/demos/demo4.tsx
index 99be81d5d..7f077c5f6 100644
--- a/src/components/popover/demos/demo4.tsx
+++ b/src/components/popover/demos/demo4.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { Button, Image, Popover } from 'antd-mobile'
 import { CloseOutline } from 'antd-mobile-icons'
 import { DemoBlock, DemoDescription } from 'demos'
diff --git a/src/components/popover/popover-menu.tsx b/src/components/popover/popover-menu.tsx
index 4f9b42c3d..31a99cfd2 100644
--- a/src/components/popover/popover-menu.tsx
+++ b/src/components/popover/popover-menu.tsx
@@ -5,14 +5,15 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
+import type { ReactNode } from 'react'
 import classNames from 'classnames'
 import { Popover, PopoverProps, PopoverRef } from './popover'
 
 const classPrefix = `adm-popover-menu`
 
 export type Action = {
-  text: React.ReactNode
-  icon?: React.ReactNode
+  text: ReactNode
+  icon?: ReactNode
   disabled?: boolean
   key?: string | number
   onClick?: () => void
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 3a56c4c39..af6b66005 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -1,11 +1,11 @@
 import React, {
   forwardRef,
   useImperativeHandle,
-  ReactElement,
   useRef,
   useState,
   useEffect,
 } from 'react'
+import type { ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
@@ -48,7 +48,7 @@ export type PopoverProps = {
   trigger?: 'click'
   placement?: Placement | DeprecatedPlacement
   stopPropagation?: PropagationEvent[]
-  content: React.ReactNode
+  content: ReactNode
 } & NativeProps<'--z-index' | '--arrow-size'>
 
 export type PopoverRef = {
diff --git a/src/components/popover/wrapper.tsx b/src/components/popover/wrapper.tsx
index 71366ef34..f4d08aefe 100644
--- a/src/components/popover/wrapper.tsx
+++ b/src/components/popover/wrapper.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
+import type { ReactNode } from 'react'
 import { findDOMNode } from 'react-dom'
 
 export class Wrapper extends React.Component<
   {
-    children?: React.ReactNode
+    children?: ReactNode
   },
   {}
 > {
diff --git a/src/components/popup/popup-base-props.ts b/src/components/popup/popup-base-props.ts
index 439b35b91..dc3817366 100644
--- a/src/components/popup/popup-base-props.ts
+++ b/src/components/popup/popup-base-props.ts
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { CSSProperties } from 'react'
 import { GetContainer } from '../../utils/render-to-container'
 import { MaskProps } from '../mask'
 import { PropagationEvent } from '../../utils/with-stop-propagation'
@@ -7,7 +8,7 @@ export type PopupBaseProps = {
   afterClose?: () => void
   afterShow?: () => void
   bodyClassName?: string
-  bodyStyle?: React.CSSProperties
+  bodyStyle?: CSSProperties
   closeOnMaskClick?: boolean
   destroyOnClose?: boolean
   disableBodyScroll?: boolean
diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx
index 8726b3af3..5326a3f1e 100644
--- a/src/components/popup/popup.tsx
+++ b/src/components/popup/popup.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { useState, useRef, FC, PropsWithChildren } from 'react'
+import React, { useState, useRef } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/progress-bar/progress-bar.tsx b/src/components/progress-bar/progress-bar.tsx
index ac207f542..59642a4b7 100644
--- a/src/components/progress-bar/progress-bar.tsx
+++ b/src/components/progress-bar/progress-bar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
diff --git a/src/components/progress-circle/progress-circle.tsx b/src/components/progress-circle/progress-circle.tsx
index 039718c4d..8172db887 100644
--- a/src/components/progress-circle/progress-circle.tsx
+++ b/src/components/progress-circle/progress-circle.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties, FC } from 'react'
+import React from 'react'
+import type { FC, CSSProperties, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 
@@ -6,7 +7,7 @@ const classPrefix = `adm-progress-circle`
 
 export type ProgressCircleProps = {
   percent?: number
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<'--size' | '--track-width' | '--track-color' | '--fill-color'>
 
 export const ProgressCircle: FC<ProgressCircleProps> = p => {
diff --git a/src/components/pull-to-refresh/pull-to-refresh.tsx b/src/components/pull-to-refresh/pull-to-refresh.tsx
index fc63f1d20..f9ade9962 100644
--- a/src/components/pull-to-refresh/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh/pull-to-refresh.tsx
@@ -1,8 +1,9 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { animated, useSpring } from '@react-spring/web'
 import { useDrag } from '@use-gesture/react'
 import { getScrollParent } from '../../utils/get-scroll-parent'
-import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
 import { supportsPassive } from '../../utils/supports-passive'
 import { convertPx } from '../../utils/convert-px'
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband'
@@ -24,7 +25,7 @@ export type PullToRefreshProps = {
   threshold?: number
   disabled?: boolean
   renderText?: (status: PullStatus) => ReactNode
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const defaultProps = {
diff --git a/src/components/radio/group.tsx b/src/components/radio/group.tsx
index ca40e4d61..4150a5f2d 100644
--- a/src/components/radio/group.tsx
+++ b/src/components/radio/group.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { RadioValue } from '.'
 import { RadioGroupContext } from './group-context'
@@ -9,7 +10,7 @@ export interface RadioGroupProps {
   onChange?: (val: RadioValue) => void
   defaultValue?: RadioValue | null
   disabled?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 const defaultProps = {
diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx
index b50623f15..4ae1a6752 100644
--- a/src/components/radio/radio.tsx
+++ b/src/components/radio/radio.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useContext } from 'react'
+import React, { useContext } from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import { RadioGroupContext } from './group-context'
@@ -21,8 +22,8 @@ export type RadioProps = {
   value?: RadioValue
   block?: boolean
   id?: string
-  icon?: (checked: boolean) => React.ReactNode
-  children?: React.ReactNode
+  icon?: (checked: boolean) => ReactNode
+  children?: ReactNode
   onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>
 
diff --git a/src/components/rate/rate.tsx b/src/components/rate/rate.tsx
index 47a52610f..4da3b7302 100644
--- a/src/components/rate/rate.tsx
+++ b/src/components/rate/rate.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
@@ -12,7 +13,7 @@ const classPrefix = `adm-rate`
 export type RateProps = {
   allowClear?: boolean
   allowHalf?: boolean
-  character?: React.ReactNode
+  character?: ReactNode
   count?: number
   defaultValue?: number
   readOnly?: boolean
diff --git a/src/components/result-page/result-page-card.tsx b/src/components/result-page/result-page-card.tsx
index 26cfb9c66..143cc9ec6 100644
--- a/src/components/result-page/result-page-card.tsx
+++ b/src/components/result-page/result-page-card.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 
diff --git a/src/components/result-page/result-page.tsx b/src/components/result-page/result-page.tsx
index 7190a83f7..af9e38276 100644
--- a/src/components/result-page/result-page.tsx
+++ b/src/components/result-page/result-page.tsx
@@ -1,4 +1,6 @@
-import React, { FC, ReactNode, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC, ReactNode } from 'react'
+
 import {
   CheckCircleFill,
   CloseCircleFill,
diff --git a/src/components/result/result.tsx b/src/components/result/result.tsx
index a1311b8fb..32041b9be 100644
--- a/src/components/result/result.tsx
+++ b/src/components/result/result.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import {
   CheckCircleFill,
diff --git a/src/components/scroll-mask/scroll-mask.tsx b/src/components/scroll-mask/scroll-mask.tsx
index a64613aab..73fadf6cc 100644
--- a/src/components/scroll-mask/scroll-mask.tsx
+++ b/src/components/scroll-mask/scroll-mask.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useRef, RefObject, useEffect } from 'react'
+import React, { useRef, useEffect } from 'react'
+import type { FC, RefObject } from 'react'
 import classNames from 'classnames'
 import { animated, useSpring } from '@react-spring/web'
 import { useThrottleFn } from 'ahooks'
diff --git a/src/components/search-bar/demos/demo2.tsx b/src/components/search-bar/demos/demo2.tsx
index f38faf83e..0cba18e03 100644
--- a/src/components/search-bar/demos/demo2.tsx
+++ b/src/components/search-bar/demos/demo2.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react'
+import React, { useState } from 'react'
+import type { ReactNode } from 'react'
 import { Button, SearchBar, Space } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import { SearchOutline, SetOutline } from 'antd-mobile-icons'
diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 0ee89d956..0614f7207 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -1,10 +1,5 @@
-import React, {
-  useState,
-  useRef,
-  forwardRef,
-  useImperativeHandle,
-  ReactNode,
-} from 'react'
+import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react'
+import type { ReactNode } from 'react'
 import classNames from 'classnames'
 import Input, { InputRef, InputProps } from '../input'
 import Button from '../button'
diff --git a/src/components/selector/selector.tsx b/src/components/selector/selector.tsx
index 3065a5ed4..74aca896c 100644
--- a/src/components/selector/selector.tsx
+++ b/src/components/selector/selector.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { ReactNode } from 'react'
+import React from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import Space from '../space'
diff --git a/src/components/side-bar/side-bar.tsx b/src/components/side-bar/side-bar.tsx
index e5243b4c9..ca6aa3c79 100644
--- a/src/components/side-bar/side-bar.tsx
+++ b/src/components/side-bar/side-bar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, ReactElement, isValidElement } from 'react'
+import React, { isValidElement } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import Badge, { BadgeProps } from '../badge'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -23,7 +24,7 @@ export type SideBarProps = {
   activeKey?: string | null
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<
   '--width' | '--height' | '--item-border-radius' | '--background-color'
 >
diff --git a/src/components/slider/marks.tsx b/src/components/slider/marks.tsx
index 0b5c3645c..f014836b2 100644
--- a/src/components/slider/marks.tsx
+++ b/src/components/slider/marks.tsx
@@ -1,10 +1,11 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
 const classPrefix = `adm-slider-mark`
 
 export type SliderMarks = {
-  [key: number]: React.ReactNode
+  [key: number]: ReactNode
 }
 
 type MarksProps = {
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index 69c4ada27..f4dadecb0 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useMemo, useRef } from 'react'
+import React, { useMemo, useRef } from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import Ticks from './ticks'
diff --git a/src/components/slider/thumb-icon.tsx b/src/components/slider/thumb-icon.tsx
index 60ffb3973..fc509b6fb 100644
--- a/src/components/slider/thumb-icon.tsx
+++ b/src/components/slider/thumb-icon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 export const ThumbIcon: FC<NativeProps> = props => {
diff --git a/src/components/slider/thumb.tsx b/src/components/slider/thumb.tsx
index 0a4eac2b2..e3ce95410 100644
--- a/src/components/slider/thumb.tsx
+++ b/src/components/slider/thumb.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useRef, RefObject, useState, ReactNode } from 'react'
+import React, { useRef, useState } from 'react'
+import type { FC, RefObject, ReactNode } from 'react'
 import { useDrag } from '@use-gesture/react'
 import { ThumbIcon } from './thumb-icon'
 import Popover from '../popover'
@@ -14,7 +15,7 @@ type ThumbProps = {
   disabled: boolean
   onDrag: (value: number, first: boolean, last: boolean) => void
   trackRef: RefObject<HTMLDivElement>
-  icon?: React.ReactNode
+  icon?: ReactNode
   popover: boolean | ((value: number) => ReactNode)
   residentPopover: boolean
 } & NativeProps
diff --git a/src/components/slider/ticks.tsx b/src/components/slider/ticks.tsx
index 92f28e4d9..49ba8b1e0 100644
--- a/src/components/slider/ticks.tsx
+++ b/src/components/slider/ticks.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import classNames from 'classnames'
 
 const classPrefix = `adm-slider`
diff --git a/src/components/space/space.tsx b/src/components/space/space.tsx
index 3ea4d49d0..e093d9935 100644
--- a/src/components/space/space.tsx
+++ b/src/components/space/space.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
@@ -19,7 +20,7 @@ export type SpaceProps = {
   wrap?: boolean
   block?: boolean
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>
 
 const defaultProps = {
diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx
index 5c86c8896..9856877f5 100644
--- a/src/components/steps/step.tsx
+++ b/src/components/steps/step.tsx
@@ -1,13 +1,14 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-step`
 
 export type StepProps = {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
+  title?: ReactNode
+  description?: ReactNode
+  icon?: ReactNode
   status?: 'wait' | 'process' | 'finish' | 'error'
 } & NativeProps
 
diff --git a/src/components/steps/steps.tsx b/src/components/steps/steps.tsx
index 8f85fe243..914f4bf8a 100644
--- a/src/components/steps/steps.tsx
+++ b/src/components/steps/steps.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { StepProps } from './step'
 import { mergeProps } from '../../utils/with-default-props'
@@ -14,7 +15,7 @@ type Direction = 'horizontal' | 'vertical'
 export type StepsProps = {
   current?: number
   direction?: Direction
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<
   | '--title-font-size'
   | '--description-font-size'
diff --git a/src/components/swipe-action/demos/demo1.tsx b/src/components/swipe-action/demos/demo1.tsx
index 5b8398147..fe7da2f0e 100644
--- a/src/components/swipe-action/demos/demo1.tsx
+++ b/src/components/swipe-action/demos/demo1.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { FC } from 'react'
 import { Dialog, List, SwipeAction, Toast, Image } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import { Action, SwipeActionRef } from 'antd-mobile/es/components/swipe-action'
diff --git a/src/components/swipe-action/swipe-action.tsx b/src/components/swipe-action/swipe-action.tsx
index 75d39e225..f3d78f368 100644
--- a/src/components/swipe-action/swipe-action.tsx
+++ b/src/components/swipe-action/swipe-action.tsx
@@ -1,11 +1,11 @@
 import React, {
   forwardRef,
-  ReactNode,
   RefObject,
   useEffect,
   useImperativeHandle,
   useRef,
 } from 'react'
+import type { ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { useSpring, animated } from '@react-spring/web'
 import { useDrag } from '@use-gesture/react'
@@ -141,7 +141,6 @@ export const SwipeAction = forwardRef<SwipeActionRef, SwipeActionProps>(
             right: leftWidth,
           }
         },
-        // rubberband: true,
         axis: 'x',
         preventScroll: true,
         pointer: { touch: true },
diff --git a/src/components/swiper/demos/demo3.tsx b/src/components/swiper/demos/demo3.tsx
index 4f69492bb..6815d8909 100644
--- a/src/components/swiper/demos/demo3.tsx
+++ b/src/components/swiper/demos/demo3.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC } from 'react'
 import { Button, Popup, Space, Swiper } from 'antd-mobile'
 import { DemoBlock, DemoDescription } from 'demos'
 
diff --git a/src/components/swiper/swiper-item.tsx b/src/components/swiper/swiper-item.tsx
index 313049e65..ea463b6f9 100644
--- a/src/components/swiper/swiper-item.tsx
+++ b/src/components/swiper/swiper-item.tsx
@@ -1,9 +1,10 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 type Props = {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const SwiperItem: FC<Props> = props => {
diff --git a/src/components/swiper/swiper.tsx b/src/components/swiper/swiper.tsx
index acb4d9f03..f1c779764 100644
--- a/src/components/swiper/swiper.tsx
+++ b/src/components/swiper/swiper.tsx
@@ -1,14 +1,12 @@
 import React, {
   forwardRef,
-  ReactElement,
-  ReactNode,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
-  CSSProperties,
 } from 'react'
+import type { ReactNode, CSSProperties, ReactElement } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index f4e8698db..dfad26a3f 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC, ReactNode, useState } from 'react'
+import React, { useState } from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { usePropsValue } from '../../utils/use-props-value'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/tab-bar/demos/demo2.tsx b/src/components/tab-bar/demos/demo2.tsx
index c39ccf1f9..47f35ef14 100644
--- a/src/components/tab-bar/demos/demo2.tsx
+++ b/src/components/tab-bar/demos/demo2.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import { NavBar, TabBar } from 'antd-mobile'
 import {
   Route,
diff --git a/src/components/tab-bar/tab-bar.tsx b/src/components/tab-bar/tab-bar.tsx
index 13be270d1..02c3f7e56 100644
--- a/src/components/tab-bar/tab-bar.tsx
+++ b/src/components/tab-bar/tab-bar.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, ReactElement, isValidElement } from 'react'
+import React, { isValidElement } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
@@ -23,7 +24,7 @@ export type TabBarProps = {
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
   safeArea?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 const classPrefix = `adm-tab-bar`
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 3301f15ef..c09905cec 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -1,10 +1,5 @@
-import React, {
-  FC,
-  ReactNode,
-  ReactElement,
-  isValidElement,
-  useRef,
-} from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { useSpring, animated } from '@react-spring/web'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -38,7 +33,7 @@ export type TabsProps = {
   activeLineMode?: 'auto' | 'full' | 'fixed'
   stretch?: boolean
   onChange?: (key: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<
   | '--fixed-active-line-width'
   | '--active-line-height'
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
index 806f7dad1..01226a9eb 100644
--- a/src/components/tag/tag.tsx
+++ b/src/components/tag/tag.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties, FC } from 'react'
+import React from 'react'
+import type { FC, CSSProperties, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
@@ -24,7 +25,7 @@ export type TagProps = {
   fill?: 'solid' | 'outline'
   round?: boolean
   onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps<
   '--border-color' | '--background-color' | '--text-color' | '--border-radius'
 >
diff --git a/src/components/toast/demos/demo1.tsx b/src/components/toast/demos/demo1.tsx
index c7e4bc2bb..0fae64c43 100644
--- a/src/components/toast/demos/demo1.tsx
+++ b/src/components/toast/demos/demo1.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { FC } from 'react'
 import { Button, Space, Toast } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import { UploadOutline } from 'antd-mobile-icons'
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
index dc7d9f5ed..b9e23ac7a 100644
--- a/src/components/toast/toast.tsx
+++ b/src/components/toast/toast.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode, useMemo } from 'react'
+import React, { useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import { CheckOutline, CloseOutline } from 'antd-mobile-icons'
 import Mask from '../mask'
@@ -17,7 +18,7 @@ export interface ToastProps {
   maskClassName?: string
   maskClickable?: boolean
   content?: ReactNode
-  icon?: 'success' | 'fail' | 'loading' | React.ReactNode
+  icon?: 'success' | 'fail' | 'loading' | ReactNode
   duration?: number
   position?: 'top' | 'bottom' | 'center'
   visible?: boolean
@@ -30,7 +31,7 @@ const defaultProps = {
   stopPropagation: ['click'],
 }
 
-export const InternalToast: React.FC<ToastProps> = p => {
+export const InternalToast: FC<ToastProps> = p => {
   const props = mergeProps(defaultProps, p)
   const { maskClickable, content, icon, position } = props
 
diff --git a/src/components/tree-select/multiple.tsx b/src/components/tree-select/multiple.tsx
index fa6b87764..361abb551 100644
--- a/src/components/tree-select/multiple.tsx
+++ b/src/components/tree-select/multiple.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC, useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import type { FC } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { getTreeDeep } from '../../utils/tree'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/tree-select/tree-select.tsx b/src/components/tree-select/tree-select.tsx
index 73f760811..5b6a0cb3b 100644
--- a/src/components/tree-select/tree-select.tsx
+++ b/src/components/tree-select/tree-select.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC, useMemo } from 'react'
+import React, { useMemo } from 'react'
+import type { FC } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { getTreeDeep } from '../../utils/tree'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/virtual-input/virtual-input.tsx b/src/components/virtual-input/virtual-input.tsx
index 6e764320b..b5eb60295 100644
--- a/src/components/virtual-input/virtual-input.tsx
+++ b/src/components/virtual-input/virtual-input.tsx
@@ -1,11 +1,11 @@
 import React, {
   forwardRef,
-  ReactElement,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react'
+import type { ReactElement } from 'react'
 import type { InputProps } from '../input'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
diff --git a/src/components/water-mark/water-mark.tsx b/src/components/water-mark/water-mark.tsx
index 2733e8804..2107a5ab3 100644
--- a/src/components/water-mark/water-mark.tsx
+++ b/src/components/water-mark/water-mark.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 
diff --git a/src/demos/demo-block/index.tsx b/src/demos/demo-block/index.tsx
index 7f3e24ee5..f239b7792 100644
--- a/src/demos/demo-block/index.tsx
+++ b/src/demos/demo-block/index.tsx
@@ -1,11 +1,12 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import styles from './index.less'
 
 interface Props {
   title: string
   padding?: string
   background?: string
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const DemoBlock: FC<Props> = props => {
diff --git a/src/demos/demo-description/index.tsx b/src/demos/demo-description/index.tsx
index 9083af98e..f493a8d1c 100644
--- a/src/demos/demo-description/index.tsx
+++ b/src/demos/demo-description/index.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import styles from './index.less'
 
 export const DemoDescription: FC<{
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
new file mode 100644
index 000000000..2218b2734
--- /dev/null
+++ b/src/hooks/index.tsx
@@ -0,0 +1,2 @@
+export { useFieldNames } from './useFieldNames'
+export type { FieldNamesType } from './useFieldNames'
diff --git a/src/hooks/useFieldNames.tsx b/src/hooks/useFieldNames.tsx
new file mode 100644
index 000000000..979a98e68
--- /dev/null
+++ b/src/hooks/useFieldNames.tsx
@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+export type FieldNamesType = {
+  label?: string
+  value?: string
+  disabled?: string
+  children?: string
+}
+export const useFieldNames = (fieldNames: FieldNamesType = {}) => {
+  const fields = useMemo(() => {
+    const {
+      label = 'label',
+      value = 'value',
+      disabled = 'disabled',
+      children = 'children',
+    } = fieldNames
+
+    return [label, value, disabled, children] as string[]
+  }, [JSON.stringify(fieldNames)])
+
+  return fields
+}
diff --git a/src/utils/create-icon-component.tsx b/src/utils/create-icon-component.tsx
index 1dc5b5caf..ec98e9890 100644
--- a/src/utils/create-icon-component.tsx
+++ b/src/utils/create-icon-component.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react'
+import type { FC, ReactElement } from 'react'
 
 export function createIconComponent(svg: ReactElement) {
   const Icon: FC = () => {
diff --git a/src/utils/is-node-with-content.ts b/src/utils/is-node-with-content.ts
index 3b2d1c433..62849cc73 100644
--- a/src/utils/is-node-with-content.ts
+++ b/src/utils/is-node-with-content.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 type Regulated<T> = T extends null | undefined | false ? never : T
 
diff --git a/src/utils/render-imperatively.tsx b/src/utils/render-imperatively.tsx
index 51d02eb85..00a6fac19 100644
--- a/src/utils/render-imperatively.tsx
+++ b/src/utils/render-imperatively.tsx
@@ -1,10 +1,5 @@
-import React, {
-  ReactElement,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import type { ReactElement } from 'react'
 import { renderToBody } from './render-to-body'
 
 type ImperativeProps = {
diff --git a/src/utils/render-to-body.ts b/src/utils/render-to-body.ts
index f2dda8aab..159183425 100644
--- a/src/utils/render-to-body.ts
+++ b/src/utils/render-to-body.ts
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import type { ReactElement } from 'react'
 import { render, unmount as reactUnmount } from './render'
 
 export function renderToBody(element: ReactElement) {
diff --git a/src/utils/render-to-container.ts b/src/utils/render-to-container.ts
index b622b2c45..8af17f2ca 100644
--- a/src/utils/render-to-container.ts
+++ b/src/utils/render-to-container.ts
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom'
-import { ReactElement, ReactPortal } from 'react'
+import type { ReactElement, ReactPortal } from 'react'
 import { resolveContainer } from './get-container'
 import { canUseDom } from './can-use-dom'
 
diff --git a/src/utils/render.ts b/src/utils/render.ts
index 0cfbe89cb..d3c8206e9 100644
--- a/src/utils/render.ts
+++ b/src/utils/render.ts
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import type { ReactElement } from 'react'
 import * as ReactDOM from 'react-dom'
 import type { Root } from 'react-dom/client'
 
diff --git a/src/utils/should-render.tsx b/src/utils/should-render.tsx
index db655aab1..57e21c861 100644
--- a/src/utils/should-render.tsx
+++ b/src/utils/should-render.tsx
@@ -1,6 +1,5 @@
 import { useInitialized } from './use-initialized'
-import { FC, ReactElement } from 'react'
-
+import type { FC, ReactElement } from 'react'
 interface Props {
   active: boolean
   forceRender?: boolean
diff --git a/src/utils/traverse-react-node.tsx b/src/utils/traverse-react-node.tsx
index 64a35b89f..4b8827bf1 100644
--- a/src/utils/traverse-react-node.tsx
+++ b/src/utils/traverse-react-node.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+import type { ReactNode } from 'react'
 import { isFragment } from 'react-is'
 
 export function traverseReactNode(
diff --git a/src/utils/with-stop-propagation.tsx b/src/utils/with-stop-propagation.tsx
index b25fe6f7d..6155e3a0c 100644
--- a/src/utils/with-stop-propagation.tsx
+++ b/src/utils/with-stop-propagation.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement } from 'react'
-
+import React from 'react'
+import type { ReactElement } from 'react'
 export type PropagationEvent = 'click'
 
 const eventToPropRecord: Record<PropagationEvent, string> = {


Test patch:
diff --git a/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap b/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
index fc064bb7b..69754cc2b 100644
--- a/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
+++ b/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
@@ -2471,3 +2471,1101 @@ exports[`CascaderView same value in options 3`] = `
   </div>
 </div>
 `;
+
+exports[`CascaderView test fieldNames 1`] = `
+<div>
+  <div
+    class="adm-cascader-view"
+  >
+    <div
+      class="adm-tabs adm-cascader-view-tabs"
+    >
+      <div
+        class="adm-tabs-header"
+      >
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-left"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-right"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-tab-list"
+          role="tablist"
+        >
+          <div
+            class="adm-tabs-tab-line"
+            style="width: 0px; transform: none;"
+          />
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="false"
+              class="adm-tabs-tab"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                浙江
+              </div>
+            </div>
+          </div>
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="true"
+              class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                请选择
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: none;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      浙江
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      安徽
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      江苏
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: block;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      杭州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      温州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      宁波
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CascaderView test fieldNames 2`] = `
+<div>
+  <div
+    class="adm-cascader-view"
+  >
+    <div
+      class="adm-tabs adm-cascader-view-tabs"
+    >
+      <div
+        class="adm-tabs-header"
+      >
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-left"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-right"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-tab-list"
+          role="tablist"
+        >
+          <div
+            class="adm-tabs-tab-line"
+            style="width: 0px; transform: none;"
+          />
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="false"
+              class="adm-tabs-tab"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                浙江
+              </div>
+            </div>
+          </div>
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="false"
+              class="adm-tabs-tab"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                杭州
+              </div>
+            </div>
+          </div>
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="true"
+              class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                请选择
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: none;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      浙江
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      安徽
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      江苏
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: none;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      杭州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      温州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      宁波
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: block;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      西湖区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      上城区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-list-item-disabled adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      余杭区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CascaderView test fieldNames 3`] = `
+<div>
+  <div
+    class="adm-cascader-view"
+  >
+    <div
+      class="adm-tabs adm-cascader-view-tabs"
+    >
+      <div
+        class="adm-tabs-header"
+      >
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-left"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-header-mask adm-tabs-header-mask-right"
+          style="opacity: 0;"
+        />
+        <div
+          class="adm-tabs-tab-list"
+          role="tablist"
+        >
+          <div
+            class="adm-tabs-tab-line"
+            style="width: 0px; transform: none;"
+          />
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="false"
+              class="adm-tabs-tab"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                浙江
+              </div>
+            </div>
+          </div>
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="false"
+              class="adm-tabs-tab"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                杭州
+              </div>
+            </div>
+          </div>
+          <div
+            class="adm-tabs-tab-wrapper"
+          >
+            <div
+              aria-selected="true"
+              class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
+            >
+              <div
+                class="adm-cascader-view-header-title"
+              >
+                西湖区
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: none;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      浙江
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      安徽
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      江苏
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: none;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      杭州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      温州
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      宁波
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="adm-tabs-content"
+        style="display: block;"
+      >
+        <div
+          class="adm-cascader-view-content"
+        >
+          <div
+            class="adm-list adm-list-default adm-check-list"
+          >
+            <div
+              class="adm-list-body"
+            >
+              <div
+                class="adm-list-body-inner"
+              >
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-check-list-item-active adm-cascader-view-item adm-cascader-view-item-active"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      西湖区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      >
+                        <svg
+                          class="antd-mobile-icon"
+                          height="1em"
+                          style="vertical-align: -0.125em;"
+                          viewBox="0 0 48 48"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlns:xlink="http://www.w3.org/1999/xlink"
+                        >
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            id="CheckOutline-CheckOutline"
+                            stroke="none"
+                            stroke-width="1"
+                          >
+                            <g
+                              id="CheckOutline-编组"
+                            >
+                              <rect
+                                fill="#FFFFFF"
+                                height="48"
+                                id="CheckOutline-矩形"
+                                opacity="0"
+                                width="48"
+                                x="0"
+                                y="0"
+                              />
+                              <path
+                                d="M44.309608,12.6841286 L21.2180499,35.5661955 L21.2180499,35.5661955 C20.6343343,36.1446015 19.6879443,36.1446015 19.1042286,35.5661955 C19.0538201,35.5162456 19.0077648,35.4636155 18.9660627,35.4087682 C18.9113105,35.368106 18.8584669,35.3226694 18.808302,35.2729607 L3.6903839,20.2920499 C3.53346476,20.1365529 3.53231192,19.8832895 3.68780898,19.7263704 C3.7629255,19.6505669 3.86521855,19.6079227 3.97193622,19.6079227 L7.06238923,19.6079227 C7.16784214,19.6079227 7.26902895,19.6495648 7.34393561,19.7237896 L20.160443,32.4236157 L20.160443,32.4236157 L40.656066,12.115858 C40.7309719,12.0416387 40.8321549,12 40.9376034,12 L44.0280571,12 C44.248971,12 44.4280571,12.1790861 44.4280571,12.4 C44.4280571,12.5067183 44.3854124,12.609012 44.309608,12.6841286 Z"
+                                fill="currentColor"
+                                fill-rule="nonzero"
+                                id="CheckOutline-路径"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      上城区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+                <a
+                  class="adm-list-item adm-plain-anchor adm-list-item-disabled adm-check-list-item adm-cascader-view-item"
+                >
+                  <div
+                    class="adm-list-item-content"
+                  >
+                    <div
+                      class="adm-list-item-content-main"
+                    >
+                      余杭区
+                    </div>
+                    <div
+                      class="adm-list-item-content-extra"
+                    >
+                      <div
+                        class="adm-check-list-item-extra"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/cascader-view/tests/cascader-view.test.tsx b/src/components/cascader-view/tests/cascader-view.test.tsx
index 41a20645a..5a2681414 100644
--- a/src/components/cascader-view/tests/cascader-view.test.tsx
+++ b/src/components/cascader-view/tests/cascader-view.test.tsx
@@ -13,6 +13,14 @@ async function click(contentIndex: number, itemIndex: number) {
   fireEvent.click(item)
 }
 
+const changeOptionKey = (arr: any[] = []): any[] =>
+  arr.map(item => ({
+    labelT: item.label,
+    valueT: item.value,
+    disabledT: item.disabled,
+    childrenT: item.children && changeOptionKey(item.children),
+  }))
+
 describe('CascaderView', () => {
   test('a11y', async () => {
     await testA11y(<CascaderView options={options} />)
@@ -43,7 +51,40 @@ describe('CascaderView', () => {
     expect(onTabsChange).toBeCalledTimes(2)
     expect(onChange.mock.calls[2][0]).toEqual(['浙江', '杭州', '西湖区'])
   })
+  test('test fieldNames', async () => {
+    const onChange = jest.fn()
+    const onTabsChange = jest.fn()
+    const options2 = changeOptionKey(options)
+
+    const { getByText, container } = render(
+      <CascaderView
+        options={options2}
+        fieldNames={{
+          label: 'labelT',
+          value: 'valueT',
+          children: 'childrenT',
+          disabled: 'disabledT',
+        }}
+        onChange={onChange}
+        onTabsChange={onTabsChange}
+      />
+    )
+
+    fireEvent.click(getByText('请选择'))
+    expect(onTabsChange).toBeCalledTimes(0)
+    fireEvent.click(getByText('浙江'))
+    expect(container).toMatchSnapshot()
 
+    fireEvent.click(getByText('杭州'))
+    expect(container).toMatchSnapshot()
+
+    fireEvent.click(getByText('西湖区'))
+    expect(container).toMatchSnapshot()
+
+    expect(onChange).toBeCalledTimes(3)
+    expect(onTabsChange).toBeCalledTimes(2)
+    expect(onChange.mock.calls[2][0]).toEqual(['浙江', '杭州', '西湖区'])
+  })
   test('controlled mode', async () => {
     const { container } = render(
       <CascaderView options={options} value={['浙江', '宁波', '江北区']} />