react高阶组件：如何同时兼容class类组件和函数式组件。

场景：

每个页面都要实现分享功能，但是页面有些是用class类，有些又直接是函数式。

方案1： 写2套方法。各自引用。（维护不太好，改要改2遍）

方案2： 可以封一个 jsx的组件，假如名为<Share>。返回一个<><>,在每个页面render或者 return里面引用<Share>

方案3：目前在用的，直接贴代码：

通过判断组件的类型，继承不同的原型。

/*
 * @Date: 2024-03-04 16:10:22
 * @Description: 右上角分享的钩子函数
 */

import React from 'react'

export function isClassComponent(component) {
  return (
    typeof component === 'function' && !!component.prototype.isReactComponent
  )
}

export default function withShare(Component) {
  const classComponent = class ContainerBox extends Component {
    /** 分享到聊天框 */
    onShareAppMessage() {
      const url = '/pages/home/index'
      const title = 'title'
      const shareData: any = {
        title: this.props?.title || title,
        path: this.props?.url || url,
        imageUrl: $.cdn('ypdj_mini_share.png'),
      }
      if (this.props?.img) {
        shareData.imageUrl = this.props.img
      }
      return shareData
    }

    /** 分享到朋友圈 */
    onShareTimeline() {
      const title = '全国家居售后服务平台'
      const shareData: any = {
        title: this.props?.title || title,
      }
      if (this.props?.img) {
        shareData.imageUrl = this.props.img
      }
      return shareData
    }
  }

  const functionComponent = class ContainerBox extends React.PureComponent<any> {
    /** 分享到聊天框 */
    onShareAppMessage() {
      const url = '/pages/home/index'
     const title = 'title'
      const shareData: any = {
        title: this.props?.title || title,
        path: this.props?.url || url,
        imageUrl: $.cdn('ypdj_mini_share.png'),
      }
      if (this.props?.img) {
        shareData.imageUrl = this.props.img
      }
      return shareData
    }

    /** 分享到朋友圈 */
    onShareTimeline() {
      const title = 'title'
      const shareData: any = {
        title: this.props?.title || title,
      }
      if (this.props?.img) {
        shareData.imageUrl = this.props.img
      }
      return shareData
    }

    render(): React.ReactNode {
      return (
        <Component {...this.props}></Component>
      )
    }
  }

  if (isClassComponent(Component)) {
    return classComponent
  }
  return functionComponent
}