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: string
  buttonClicked: ClickMetricEnum
  trackingWorkflow: string
  vendorGroupId?: string
  vendorCode?: string
  trackingRemark?: 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是其它文件中实现的一个上报函数。