React 高阶组件

高阶组件（Higher-Order Component，简称 HOC）是 React 中的一种设计模式，它是一个函数，接受一个组件作为参数，并返回一个新的组件。高阶组件可以用于抽象和重用组件之间的通用逻辑，从而提高代码的可重用性和可维护性。

高阶组件的主要特点如下：

• 高阶组件是一个函数，而不是一个组件。
• 高阶组件接受一个组件作为参数，并返回一个新的组件。
• 高阶组件通过包裹传入的组件，可以在不修改原组件的情况下，对其进行功能增强或修改行为。
• 高阶组件可以访问并操作被包裹组件的 props、state 和生命周期方法。

以下是一个 TypeScript 实现的高阶组件，当被点击时会上报操作行为，并且保留用户自定义的点击行为，同时允许通过 props 传递上报的内容

import React from 'react'
import { KatButton, KatIcon, KatLink } from '@amzn/katal-react'
import { ClickMetricEnum } from 'src/config/metrics'
import { clickTracker } from 'src/utils/metricUtils'export interface ClickTrackingProps {trackingId: stringbuttonClicked: ClickMetricEnumtrackingWorkflow: stringvendorGroupId?: stringvendorCode?: stringtrackingRemark?: string
}const trackClickEvent = (props: ClickTrackingProps) => {clickTracker(props.trackingId,props.buttonClicked,props.trackingWorkflow,props.vendorGroupId,props.vendorCode,props.trackingRemark)
}// HOC to add click event reporting
function withClickTracking<P extends object>(WrappedComponent: React.ComponentType<P>
): React.FC<P & ClickTrackingProps> {const ClickTrackingComponent: React.FC<P & ClickTrackingProps> = props => {const handleClick = (event: React.MouseEvent<HTMLElement>) => {trackClickEvent(props)if ((props as any).onClick) {;(props as any).onClick(event)}}return <WrappedComponent {...props} onClick={handleClick} />}return ClickTrackingComponent
}export const TrackableKatButton = withClickTracking(KatButton)
export const TrackableKatIcon = withClickTracking(KatIcon)
export const TrackableKatLink = withClickTracking(KatLink)

其中clickTracker是其它文件中实现的一个上报函数。