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

news/2024/7/15 18:37:25 标签: react.js, javascript, 前端, taro, 微信小程序

场景:

每个页面都要实现分享功能,但是页面有些是用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
}


http://www.niftyadmin.cn/n/5412064.html

相关文章

【Matlab深度学习】详解matlab深度学习进行时间序列预测

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 &#x1f510;#### 防伪水印——左手の明天 ####&#x1f510; &#x1f497; 大家…

Linux 之三:CentOS7 目录结构 和 日期及时区设置

Linux 目录 以下是对这些目录的解释&#xff1a; /bin&#xff1a;bin是Binary的缩写, 这个目录存放着最经常使用的命令。/boot&#xff1a; 这里存放的是启动Linux时使用的一些核心文件&#xff0c;包括一些连接文件以及镜像文件。/dev &#xff1a; dev是Device(设备)的缩写…

Android如何对应用进行系统签名

一、使用命令 获取签名文件 从系统源码环境中获取签名相关文件&#xff1a; platform.x509.pem、platform.pk8 、signapk.jar platform.x509.pem、platform.pk8 位于 ../build/target/product/security 目录下。signapk.jar 位于 ../out/host/linux-x86/framework 目录下。 …

EdgeX Foundry 连接物联网设备

文章目录 一、概述1.系统设计说明2.docker-comepse3.MQTT 模拟设备4.Modbus Slave5.安装 EMQX6.MQTTX 工具 二、连接设备服务1.docker-comepse2.修改配置文件3.启动 EdgeX Foundry3.访问 UI3.1. consul3.2. EdgeX Console 4.创建 MQTT 设备4.1.创建设备配置文件4.2.添加设备 5.…

JavaScript极速入门(1)

初识JavaScript JavaScript是什么 JavaScript(简称JS),是一个脚本语言,解释型或者即时编译型语言.虽然它是作为开发Web页面的脚本语言而著名,但是也应用到了很多非浏览器的环境中. 看似这门语言叫JavaScript,其实在最初发明之初,这门语言的名字其实是在蹭Java的热度,实际上和…

TCP/IP超全笔记 - TCP篇

TCP/IP超全笔记 - TCP篇 什么是 TCP TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。 面向连接&#xff1a;一对一&#xff0c;先连接&#xff0c;再传输数据可靠交付&#xff1a;…

【Linux C | 网络编程】广播概念、UDP实现广播的C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

利用MATLAB模拟点电荷的电场分布

一、实验目的&#xff1a; 1&#xff0e;熟悉点电荷的电场分布情况&#xff1b; 2&#xff0e;学会使用Matlab绘图&#xff1b; 二、实验内容&#xff1a; 1&#xff0e;根据库伦定律&#xff0c;利用Matlab强大的绘图功能画出单个点电荷的电场分布情况&#xff0c;包括电力…