React 高阶组件(HOC)
高阶组件不是 React API 的一部分,而是一种用来复用组件逻辑而衍生出来的一种技术。
什么是高阶组件
简言之, 高阶组件:
- 是一个函数
- 传入一个组件
- 返回一个新组件
Example: 给任意组件添加 Tooltip
这里通过一个例子演示高阶组件的用法。
- 高阶组件核心代码
export const withTooltip = (Component: React.FunctionComponent) => {
return ({ ...props }: any) => {
return (
<Flex gap={1}>
<Component {...props} />
<Tooltip description="这是提示内容">
<IconPark type="info" />
</Tooltip>
</Flex>
)
}
}
- 传入需要添加 Tooltip 的组件
const TypographyWithToolTip = withTooltip(Typography)
- 使用上一步返回的高阶组件
<TypographyWithToolTip>111</TypographyWithToolTip>
效果展示: