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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/435569.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NLP:spacy库安装与zh_core_web_sm配置

到公司来第一个项目竟然是偏文本信息抽取与结构化的&#xff0c;&#xff08;也太高看我了┭┮﹏┭┮&#xff09; 反正给机会了就上吧&#xff0c;我就一臭实习的&#xff0c;怕个啥。配置了两天的环境&#xff0c;也踩了不少坑&#xff0c;我把我的经历给大家分享一下&#…

HarmonyOS NEXT应用开发案例集

概述 随着应用代码的复杂度提升&#xff0c;为了使应用有更好的可维护性和可扩展性&#xff0c;良好的应用架构设计变得尤为重要。本篇文章将介绍一个应用通用架构的设计思路&#xff0c;以减少模块间的耦合、提升团队开发效率&#xff0c;为开发者呈现一个清晰且结构化的开发…

【Tauri】(4):整合Tauri和actix-web做本地大模型应用开发,可以实现session 登陆接口,完成页面展示,进入聊天界面

1&#xff0c;视频地址 https://www.bilibili.com/video/BV1GJ4m1Y7Aj/ 【Tauri】&#xff08;4&#xff09;&#xff1a;整合Tauri和actix-web做本地大模型应用开发&#xff0c;可以实现session 登陆接口&#xff0c;完成页面展示&#xff0c;进入聊天界面 使用国内代理进行加…

【HTML】HTML基础7.3(自定义列表)

目录 标签 效果 代码 注意 标签 <dl> <dt>自定义标题</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd> 。。。。。。 </dl> 效果 代码 <dl><dt>蜘蛛侠系列</dt><dd>蜘蛛侠1</dd…

PyCharm Community Edition 2023.3.3,UI界面设置成旧版

File->Settings->Appearance & Behavior->New UI->Enable new UI(取消勾选)->重启PyCharm 旧版UI: 新版UI&#xff1a;

基于决策树实现葡萄酒分类

基于决策树实现葡萄酒分类 将葡萄酒数据集拆分成训练集和测试集&#xff0c;搭建tree_1和tree_2两个决策树模型&#xff0c;tree_1使用信息增益作为特征选择指标&#xff0c;B树使用基尼指数作为特征选择指标&#xff0c;各自对训练集进行训练&#xff0c;然后分别对训练集和测…

【ETCD】简介安装常用操作---图文并茂详细讲解

目录 一 简介 1.1 etcd是什么 1.2. 特点 1.3. 使用场景 1.4 关键字 1.5 工作原理 二 安装 2.1 etcd安装前介绍 2.2 安装 2.3 启动 2.4 创建一个etcd服务 三 常用操作 一 简介 1.1 etcd是什么 etcd是CoreOS团队于2013年6月发起的开源项目&#xff0c;它的目标是构建…

git 如何将多个提交点合并为一个提交点 commit

文章目录 核心命令详细使用模式总结示例 核心命令 git merge branch2 是将分支branch2的提交点合并到本地当前分支。 而在执行这条命令的时候&#xff0c;加一个选项--squash就表示在合并的时候将多个提交点合并为一个提交点。 git merge --squash branch2 先看squash单词的意…

探索c++——了解c++的魅力

前言&#xff1a;c是一门既面向对象又面向过程的语言。 不同于java纯粹的面向对象和c纯粹的面向过程。 造成c该特性的原因是c是由本贾尼大佬在c的基础上增添语法创建出来的一门新的语言。 它既兼容了c&#xff0c; 身具面向过程的特性。 又有本身的面向对象的特性。 面向对象和…

SpringBoot集成ElasticSearch(ES)

ElasticSearch环境搭建 采用docker-compose搭建&#xff0c;具体配置如下&#xff1a; version: 3# 网桥es -> 方便相互通讯 networks:es:services:elasticsearch:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/elasticsearch:7.14.1 # 原镜像elasticsearch:7.…

Unity 整体界面淡入淡出效果

在Unity中&#xff0c;如果我们要实现控制多个组件同时淡出&#xff0c;同时淡入的效果&#xff0c;可以使用DOTween插件实现。 如图&#xff0c;一个页面中带有背景&#xff0c;一张图片&#xff0c;一个文本&#xff0c;一个滑动条。 要实现以上界面的整体淡入淡出&#xff…

机器学习-启航

文章目录 原理分析机器学习的两种典型任务机器学习分类总结数据机器学习分类解读简单复杂 原理分析 马克思主义哲学-规律篇 规律客观存在&#xff0c;万事万物皆有规律。 机器学习则是多维角度拆解分析复杂事实数据&#xff0c;发现复杂事实背后的规律&#xff0c;然后将规律用…

C#,回文分割问题(Palindrome Partitioning Problem)算法与源代码

1 回文串 “回文串”是一个正读和反读都一样的字符串&#xff0c;初始化标志flagtrue&#xff0c;比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串&#xff0c;如果该字符串的每个子字符串都是回文的&#xff0c;那么该字符串的分区就是回文分区。…

VS code下载与使用方法(包含远程调试)

Visual Studio Code(简称 VSCode)是由微软开发的一款免费、开源、跨平台的现代化轻量级代码编辑器。它具有丰富的功能和强大的扩展性,适用于多种编程语言和开发环境。以下是 VSCode 的一些主要特点和功能: 跨平台支持: 可在 Windows、macOS 和 Linux 等多种操作系…

基于ACM32 MCU的两轮车充电桩方案,打造高效安全的电池管理

随着城市化进程的加快、人们生活水平的提高和节能环保理念的普及&#xff0c;越来越多的人选择了电动车作为代步工具&#xff0c;而两轮电动车的出行半径较短&#xff0c;需要频繁充电&#xff0c;因此在城市中设置两轮车充电桩就非常有必要了。城市中的充电桩不仅能解决两轮车…

Flink:Temporal Table 的两种实现方式 Temporal Table DDL 和 Temporal Table Function

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

近地面无人机植被定量遥感与生理参数反演技术应用

李老师&#xff08;副教授&#xff09;&#xff0c;长期从事无人机近地面植被遥感&#xff0c;植被生理参数&#xff0c;多角度遥感&#xff0c;RGB/多光谱/高光谱数据处理&#xff0c;LiDAR点云处理等领域研究工作&#xff0c;具有资深的技术底蕴和专业背景。 专题一、近十年…

java 获取项目内的资源/配置文件

【getResourceAsStream】是java中用于获取项目内资源的常用方法&#xff0c;能够返回一个数据流&#xff0c;从而允许我们读取指定路径下的资源文件。这个方法可以用来读取各种类型的资源文件&#xff0c;包括但不限于文本文件、图像文件、配置文件等。 要使用getResourceAsStr…

InfluxDB SHOW SERIES语句按照什么顺序返回?

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言样例SHOW SERIES比较原理结论结束语 引言 influxdb的计算引擎为了做到自底而上的…

【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-点空格…