当前位置：首页 > news >正文

【AI解读源码系列】ant design mobile——Space间距

news 2025/8/26 11:56:32

前言

笔者目前业务主要围绕ant design mobile组件库来交付H5前端工作。

故此出此专栏来解读每一个组件是如何实现的。

本文基于AI来解读Space组件。

文档链接：

https://mobile.ant.design/zh/components/space

源码：

https://github.com/ant-design/ant-design-mobile/blob/master/src/components/space/space.tsx

设计prompt

解读antd-mobile space组件，结构化思维输出整个组件实现流程，按步骤提供关键代码解读 // 附组件代码

实现步骤

1. 目的

在子元素间插入可定制间距（horizontal / vertical / wrap / align / justify），通过 CSS 变量暴露 gap（–gap、–gap-horizontal、–gap-vertical）。

2. Props（关键）

export type SpaceProps = {direction?: 'horizontal' | 'vertical'           // 默认 'horizontal'align?: 'start' | 'end' | 'center' | 'baseline'justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'wrap?: booleanblock?: booleanonClick?: (e: React.MouseEvent<HTMLDivElement>) => voidchildren?: React.ReactNode
} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>

默认：

const defaultProps = { direction: 'horizontal' }

3. 渲染逻辑（核心 JSX）

合并默认 props（mergeProps）
使用 withNativeProps 注入原生属性（style/className/data-*）
每个子节点包裹为 .adm-space-item（过滤 null/undefined）

关键代码：

export const Space: FC<SpaceProps> = p => {const props = mergeProps(defaultProps, p)const { direction, onClick } = propsreturn withNativeProps(props,<divclassName={classNames('adm-space', {'adm-space-wrap': props.wrap,'adm-space-block': props.block,[`adm-space-${direction}`]: true,[`adm-space-align-${props.align}`]: !!props.align,[`adm-space-justify-${props.justify}`]: !!props.justify,})}onClick={onClick}>{React.Children.map(props.children, child =>child === null || child === undefined ? null : (<div className="adm-space-item">{child}</div>))}</div>)
}

简短工具实现（可参考）：

function mergeProps<T>(defaults: Partial<T>, props: T): T {return { ...(defaults as any), ...(props as any) }
}function withNativeProps(props: any, node: React.ReactElement) {const { className, style, ...rest } = propsreturn React.cloneElement(node, {...rest,className: [node.props.className, className].filter(Boolean).join(' '),style: { ...(node.props.style || {}), ...(style || {}) },})
}

4. 样式核心（要点）

使用 CSS 变量： --gap, --gap-horizontal, --gap-vertical
默认 display: inline-flex，block 时为 display: flex
.adm-space-item { flex: none } 保证子项不被拉伸
vertical：item 用 margin-bottom，最后一个取消
horizontal：item 用 margin-right，容器用负 margin-right 抵消末尾多余空隙
wrap：flex-wrap: wrap + 外层负 margin-bottom + item padding-bottom 实现行间距

简要 CSS：

.adm-space {display: inline-flex;--gap: 8px;--gap-horizontal: var(--gap);--gap-vertical: var(--gap);
}
.adm-space-item { flex: none; }.adm-space-horizontal { flex-direction: row; }
.adm-space-horizontal > .adm-space-item { margin-right: var(--gap-horizontal); }
.adm-space-horizontal:not(:empty) { margin-right: calc(var(--gap-horizontal) * -1); }.adm-space-vertical { flex-direction: column; }
.adm-space-vertical > .adm-space-item { margin-bottom: var(--gap-vertical); }
.adm-space-vertical > .adm-space-item:last-child { margin-bottom: 0; }.adm-space-wrap { flex-wrap: wrap; margin-bottom: calc(var(--gap-vertical) * -1); }
.adm-space-wrap > .adm-space-item { padding-bottom: var(--gap-vertical); }/* align / justify 映射到 align-items / justify-content */

5. 使用示例

<Space><Button>按钮1</Button><Button>按钮2</Button>
</Space><Space direction="vertical" style={{ '--gap': '16px' }}><div>行1</div><div>行2</div>
</Space><Space wrap style={{ '--gap-horizontal': '12px', '--gap-vertical': '8px' }}>{items.map(i => <Tag key={i}>{i}</Tag>)}
</Space>

自定义 gap：

<Space style={{ '--gap': '12px' }} />

简单替代（现代浏览器支持 flex gap）：

const SimpleSpace = ({children, gap='8px'}) => (<div style={{display:'inline-flex', gap}}>{React.Children.toArray(children).map((c,i)=> <div style={{flex:'none'}} key={i}>{c}</div>)}</div>
)