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

news2025/1/24 1:37:01

场景:

每个页面都要实现分享功能,但是页面有些是用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.coloradmin.cn/o/1495313.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

服务器cpu占用高没看到进程

现象&#xff1a; 1. 今天连服务器发现root密码被改了&#xff0c;再改回去&#xff0c;登录发现服务器很卡&#xff0c;top查看&#xff0c;可用的cpu为0&#xff0c;但是没看到明显的进程&#xff0c;很显然中了病毒 2. 发现crontab -l有异常的定时计划&#xff0c;给删除掉 …

DailyNotes个人笔记管理工具

DailyNotes 是记录笔记和跟踪任务的应用程序&#xff0c;使用markdown进行编辑 部署 下载镜像 docker pull m0ngr31/dailynotes创建目录并授权 mkdir -p /data/dailynotes/config_dir chmod -R 777 /data/dailynotes启动容器 docker run -d --restart always --name mynot…

【Web安全靶场】upload-labs-master 1-21

upload-labs-master 其他靶场见专栏… 文章目录 upload-labs-masterPass-01-js前端校验Pass-02-MIME校验Pass-03-其他后缀绕过黑名单Pass-04-.hatccess绕过Pass-05-点空格点代码逻辑绕过Pass-06-大小写绕过Pass-07-空格绕过Pass-08-点号绕过Pass-09-::$DATA绕过Pass-10-点空格…

2024年腾讯云8核16G18M服务器租用价格1668元15个月

2024年腾讯云8核16G18M服务器租用价格1668元15个月&#xff0c;270GB SSD云硬盘&#xff0c;3500GB月流量。 一张表看懂腾讯云服务器租用优惠价格表&#xff0c;一目了然&#xff0c;腾讯云服务器分为轻量应用服务器和云服务器CVM&#xff0c;CPU内存配置从2核2G、2核4G、4核8…

【开源】JAVA+Vue.js实现学校热点新闻推送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新闻留言模块2.4 新闻评论模块2.5 新闻收藏模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 新闻类型表3.2.2 新闻表3.2.3 新闻留言表3.2.4 新闻评论表3.2.5 新闻收藏表 四、系统展…

Python与FPGA——全局二值化

文章目录 前言一、Python全局128二、Python全局均值三、Python全局OTSU四、FPGA全局128总结 前言 为什么要进行图像二值化&#xff0c;rgb图像有三个通道&#xff0c;处理图像的计算量较大&#xff0c;二值化的图像极大的减少了处理图像的计算量。即便从彩色图像转成了二值化图…

HarmonyOS应用开发-环境搭建(windows环境)

官网地址&#xff1a;链接 DevEco Studio 3.1.1 Release&#xff1a;下载地址 1、安装DevEco Studio 直接安装即可 2、配置开发环境 1.运行已安装的DevEco Studio&#xff0c;首次使用&#xff0c;请选择Do not import settings&#xff0c;单击OK。 2.安装Node.js与ohpm。注…

STC89C52串口通信详解

目录 前言 一.通信基本原理 1.1串行通信与并行通信 1.2同步通信和异步通信 1.2.1异步通信 1.2.2同步通信 1.3单工、半双工与全双工通信 1.4通信速率 二.串口通信简介 2.1接口标准 2.2串口内部结构 2.3串口相关寄存器 三.串口工作方式 四.波特率计算 五.串口初始化步骤 六.实验…

【go语言开发】gorm库连接和操作mysql,实现一个简单的用户注册和登录

本文主要介绍使用gorm库连接和操作mysql&#xff0c;首先安装gorm和mysql依赖库&#xff1b;然后初始化mysql&#xff0c;配置连接池等基本信息&#xff1b;然后建表、完成dao、controller开发&#xff1b;最后在swagger中测试 文章目录 前言安装依赖库数据库初始化账号注册和登…

Hadoop运行搭建——系统配置和Hadoop的安装

Hadoop运行搭建 前言&#xff1a; 本文原文发在我自己的博客小站&#xff0c;直接复制文本过来&#xff0c;所以图片不显示(我还是太懒啦&#xff01;)想看带图版的请移步我的博客小站~ Linux镜像&#xff1a;CentOS7 系统安装&#xff1a;CentOS安装参考教程 系统网卡设置…

在win10中下载桌面版的docker并在docker中搭建运行基于linux的容器

在win10中下载桌面版的docker 1.背景 在很多时候需要linux系统部署项目&#xff0c;在win10中安装虚拟机并在虚拟机中安装linux系统比较繁琐&#xff0c;可以利用win10自带的hyper-v的虚拟机管理工具&#xff0c;打开该虚拟机管理工具&#xff0c;安装docker&#xff0c;并在…

【排序】希尔排序

一、思想 希尔排序&#xff0c;由D.L. Shell于1959年提出&#xff0c;是基于插入排序的一种改进算法。它的主要思想是将待排序的序列分割成若干个子序列&#xff0c;这些子序列的元素是相隔一定“增量”的。然后对每个子序列进行直接插入排序。随着增量的逐步减小&#xff0c;…

数学建模【整数规划】

一、整数规划简介 整数规划其实是线性规划和非线性规划的一个特殊情况&#xff0c;即有的变量取值只能是整数&#xff0c;不能是小数。这时候就需要一个新的函数来解决问题。 对于整数规划&#xff0c;分为线性整数规划和非线性整数规划 线性整数规划&#xff1a;MATLAB可进…

gitlab仓库迁移至bitbucket

0. 场景描述 假设已有一个gitlab仓库&#xff1a;ssh://xxx_origin.git&#xff0c;想要把这个仓库迁移至bitbucket上。 默认gitlab和bitbucket的SSH key都已添加。 1. 新建bitbucket仓库 在bitbucket上创建新的仓库&#xff0c;并复制url地址。假设为&#xff1a; https:/…

Leetcode 26. 删除有序数组中的重复项 java版。 java解决删除重复数组元素并输出长度

1. 官网链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该…

一个数据库表格缺少自动增加的字段导致添加一条数据失败

一个数据库表格缺少自动增加的字段导致添加一条数据失败。最近要整理出一个cms网站源程序&#xff0c;因此新建了一个目录&#xff0c;将需要的文件复制到该目录。复制好以后&#xff0c;试用的时候发现添加留言失败。经过数小时的查找原因&#xff0c;最后找到原因&#xff0c…

修复通达OA 百度ueditor 文件上传漏动

前些日子&#xff0c;服务器阿里云监控报警&#xff0c;有文件木马文件&#xff0c;因为非常忙&#xff0c;就没及时处理&#xff0c;直接删除了木马文件了事。 谁知&#xff0c;这几天对方又上传了木马文件。好家伙&#xff0c;今天不花点时间修复下&#xff0c;你都传上瘾了…

苍穹外卖学习-----2024/03/04

1.公共字段填充 代码在这里

【python--读取csv文件统计店铺有关信息】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Python &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; python练习题 读取csv文件统计店铺有关信息 读取csv文件统计店铺有关信息 import csv import osdef get_…

L1-096 谁管谁叫爹分数

L1-096 谁管谁叫爹 分数 20 全屏浏览 切换布局 作者 陈越 单位 浙江大学 《咱俩谁管谁叫爹》是网上一首搞笑饶舌歌曲&#xff0c;来源于东北酒桌上的助兴游戏。现在我们把这个游戏的难度拔高一点&#xff0c;多耗一些智商。 不妨设游戏中的两个人为 A 和 B。游戏开始后&…