React 高阶组件(HOC)

React 高阶组件(HOC)

高阶组件不是 React API 的一部分,而是一种用来复用组件逻辑而衍生出来的一种技术。

什么是高阶组件

高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。基本上,这是从 React 的组成性质派生的一种模式,我们称它们为"纯"组件, 因为它们可以接受任何动态提供的子组件,但它们不会修改或复制其输入组件的任何行为。

简言之, 高阶组件:

  • 是一个函数
  • 传入一个组件
  • 返回一个新组件

Example: 给任意组件添加 Tooltip

这里通过一个例子演示高阶组件的用法。

  1. 高阶组件核心代码
javascript 复制代码
export const withTooltip = (Component: React.FunctionComponent) => {
  return ({ ...props }: any) => {
    return (
      <Flex gap={1}>
        <Component {...props} />
        <Tooltip description="这是提示内容">
          <IconPark type="info" />
        </Tooltip>
      </Flex>
    )
  }
}
  1. 传入需要添加 Tooltip 的组件
javascript 复制代码
const TypographyWithToolTip = withTooltip(Typography)
  1. 使用上一步返回的高阶组件
javascript 复制代码
<TypographyWithToolTip>111</TypographyWithToolTip>

效果展示:

相关推荐
写不出来就跑路5 分钟前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区8 分钟前
盘点字体性能优化方案
前端·javascript
FogLetter12 分钟前
深入浅出React Hooks:useEffect那些事儿
前端·javascript
Savior`L12 分钟前
CSS知识复习4
前端·css
0wioiw027 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠1 小时前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯1 小时前
Cursor操作面板改为垂直
前端
前端小盆友1 小时前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
react.js·chatgpt·express
我要让全世界知道我很低调1 小时前
记一次 Vite 下的白屏优化
前端·css