React 高階組件(HOC)
高階組件不是 React API 的一部分，而是一種用來復用組件邏輯而衍生出來的一種技術。
什么是高階組件
高階組件就是一個函數，且該函數接受一個組件作為參數，并返回一個新的組件。基本上，這是從 React 的組成性質派生的一種模式，我們稱它們為“純”組件， 因為它們可以接受任何動態提供的子組件，但它們不會修改或復制其輸入組件的任何行為。
簡言之, 高階組件:
- 是一個函數
- 傳入一個組件
- 返回一個新組件
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>
效果展示:
 ？)
)
