2021-03-01

最新推荐文章于 2024-05-17 09:59:53 发布
最新推荐文章于 2024-05-17 09:59:53 发布
阅读量659 收藏
点赞数 1
分类专栏： work碎片🧩 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37634366/article/details/114271483
版权

最近在做属性配置相关需求，其中有将不同版本的json配置文件进行对比的需求，期待实现与git相同的代码差异对比效果。

先上效果图
在这里插入图片描述

这里用到了两个插件 react-diff-viewer 和 json-formats

React Diff Viewer

https://praneshravi.in/react-diff-viewer/

React Diff Viewer是一款由Diff和React制作的简单而漂亮的文本差异指令观察器。它支持分屏视图、内联视图、单词差异指令、线条加粗等功能。

为什么要用 json-formats ？

接口返回数据格式为字符串，不含换行符和缩进，所以在ReactDiffViewer中显示为一行，不能达到预期的按行对比。
在这里插入图片描述
在这里插入图片描述
为了实现逐行对比，使用json-formats 将返回数据进行格式化。
json-formats 使用方法很简单
在这里插入图片描述
在这里插入图片描述

我姓王
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-03-02
xiamilaoshi的博客
03-02 867
一、数据库表准备 三个表：（1）QQUser用户表、（2）BaseInfo基本信息表、（3）Relation关系表 二、各表的约束条件 1 QQ密码不得少于6位； Len(password) >= 6 2 在线状态的值必须位0,1,2 0表示在线，1表示离线，2表示隐身 Online in(0,1,2) 3 用户等级默认值为0 4 性别允许为空值，但如果输入值就必须位0或1 0表示男，1表示女 Sex is null or sex in(0,1) 5 年龄必须在1-100的整
2021-03-05
chocolate2018的博客
03-05 268
Arago项目：设置构建环境 先决条件 以下的先决条件是必需的，并且只需要执行一次。如果您之前已经处理过这一点，请跳过快速开始部分或详细设置部分。 交叉编译工具链 meta-arago可以使用不同的工具链，目前推荐的是Arm 7.2-2017.11。如果您还没有安装它，请下载并解压缩二进制发行版。 安装Arm工具链 $ wget https://developer.arm.com/-/media/Files/downloads/gnu-a/8.3-2019.03/binrel/gcc-arm-8.3-201
react-diff-viewer:使用Diff和React制作的简单美观的文本diff查看器组件
04-29
一个由和组成的简单美观的文本diff查看器组件。 它受Github差异查看器的启发，具有拆分视图，内联视图，单词差异，行高亮等功能。 它是高度可定制的，并且几乎支持所有语言。 查看v2.0 安装 yarn add react-diff-viewer # or npm i react-diff-viewer 用法 import React , { PureComponent } from 'react' ; import ReactDiffViewer from 'react-diff-viewer' ; const oldCode = ` const a = 10 const b = 10 const c = () => console.log('foo') if(a > 10) { console.log('bar') } console.log('done') ` ; cons
用于diff功能的插件库～～react-diff-viewer
congxue666的博客
05-05 4935
大家好～～我是一枚程序鱼🐟 最近发现一款专门用于diff的插件～react-diff-viewer。可支持的功能包括拆分视图、内联视图、单词差异、行高高亮等。当然它的高度也是可定制的。 使用步骤如下： 1.安装插件——yarn i react-diff-viewer or npm ireact-diff-viewer 2.引入并使用： import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'; 完整代码如下： impor.
探秘优雅的代码差异呈现库：React-Diff-View
最新发布
gitblog_00081的博客
05-17 489
探秘优雅的代码差异呈现库：React-Diff-View 项目地址:https://gitcode.com/otakustay/react-diff-view 在软件开发中，查看和理解代码差异是一项至关重要的任务。今天，我们向您推荐一款强大的开源组件——React-Diff-View，它能让您的Git diff展示变得既美观又易用。 项目介绍 React-Diff-View是一个专门为React设...
react-diff-viewer -- 代码diff工具
m0_67011584的博客
11-08 1232
行号单击的事件处理程序。
前端Diff插件调研
qq_49464155的博客
01-17 1490
Diff插件调研
探索React Diff Viewer：一款强大的代码差异比较组件
gitblog_00054的博客
03-26 601
探索React Diff Viewer：一款强大的代码差异比较组件 项目地址:https://gitcode.com/praneshr/react-diff-viewer 在软件开发中，查看和理解代码的差异是日常任务之一。为了简化这一过程并提升效率，React Diff Viewer应运而生，它是一款优秀的开源React组件，用于显示两个代码文件之间的差异。这篇文章将深入解析该项目的技术特性、用途...
Draft 2021-03-01 10:48:46-数据集
03-04
数据集是机器学习和数据分析领域中的重要组成部分，它包含了用于训练和评估模型的真实或模拟数据。在这个特定的案例中，我们有两个数据集文件——"speed_dating_train.csv"和"speed_dating_test.csv"，它们可能源自...
CesiumJS 1.79.1(发布时间 2021-03-01)
03-02
**CesiumJS 1.79.1** 是一个重要的版本更新，发布于2021年3月1日，是Cesium库的一个稳定版本。Cesium是一个强大的开源JavaScript库，专为构建交互式3D地球应用而设计，广泛应用于WebGIS（Web地理信息系统）和BIM...
01-03-2021
03-20
2021年1月3日
react-diff-view:git diff组件
04-28
React差异视图 一个git diff组件，用于消耗git统一diff输出。 概述 拆分视图 统一检视 优化选择 功能齐全 一个干净而小巧的核心，可以显示差异。 支持拆分（并排）视图和统一（一列）视图。 可容忍的性能。 灵活的装饰组件，用于围绕更改块呈现自定义内容。 可扩展的小部件体系结构，以支持代码注释和各种要求。 可自定义的事件和样式。 强大的令牌系统可实现代码突出显示，标记特殊单词，内嵌diff等，并支持Web worker。 如果提供了源文本，则可以使用一堆实用程序函数来比较diff结构。 运行npm start可以享受具有diff显示，折叠的代码扩展，代码注释和较大的diff延迟加载的全功能演示。 我测试了2.2MB差异文件的性能，其中更改了375个文件，插入了18721个插入（+），删除了35671个（-） 。 在我的笔记本电脑（MacBook Pro 1
react-native-diff-view:一个用于解析和显示git diff的React Native模块
05-17
React本机差异视图 一个用于解析和显示git diff的React Native模块。 这个库受到启发，并从中借鉴了代码。 概述 该库的目的是为任何提供的差异分析并呈现统一的差异视图。 灵活的窗口小部件系统还允许在每行（或“更改”）的基础上呈现自定义元素。 最终结果将如下所示： 入门 npm install --save react-native-diff-view 用法 解析差异 顶级parseDiff(diff: string): IFile[]导出是的包装，但具有强类型且具有一些附加选项： nearbySequence: 'zip' | undefined nearbySequence: 'zip' | undefined -遇到附近序列时采取的操作。 渲染差异大块 顶层Diff出口将被用于渲染的单个差异的组分。 这是一个简单的例子： import React from
diff-viewer：用于src-reader处理的文件的差异查看器
02-15
差异查看器 diff-viewer允许我们以类似GitHub的样式可视化文件的两个版本之间的差异。 它专注于将当前版本与创建的后处理版本进行。 用法 打开一个新的浏览器窗口或标签，然后输入URL：_ * 例子： 屏幕截图 灵感 改编自的示例。 执照 有关许可证权利和限制（MIT），请参阅文件。
diffviewer:在线差异工具
06-21
DiffViewer：在线差异工具 DiffViewer 是一种在线工具，可让您快速查看两段文本之间的差异。 实际上，这是一个简单的网站，使用 、 和来展示使用库是多么容易。 截屏 执照 这个工具是在下发布的。
react-diff:给定两个输入，突出显示差异
04-30
React差异 突出显示两个字符串之间的，使用模块 安装 npm install react-diff 演示版 例子 var React = require ( 'react' ) ; var Diff = require ( 'react-diff' ) ; var Component = React . createClass ( { render : function ( ) { return ( < Diff xss=removed xss=removed xss=removed> ) ; } } ) ; 执照 麻省理工学院
snapshot_2021-11-03_11-01.zip
09-14
标题“snapshot_2021-11-03_11-01.zip”表明这是一个快照文件，通常在IT行业中，快照用于记录某个时间点系统或项目的状态。这个特定的快照是在2021年11月3日11时01分创建的，可能是为了备份或者版本控制的目的。快照...
36、信奥中的数学学习路线图-2021-01-03（B）.pdf
01-03
36、信奥中的数学学习路线图-2021-01-03（B）.pdf
流量回放系统的设计与实现--流量回放模块
伤心的辣条
09-21 365
本系统采用前后端分离架构，本文仅就 流量回放 模块的设计与实现，做分析讲解，其它模块将在后续文章中拆分讲述。
java生成租金计划 需求：根据下面的条件生成每个月的月租金计划列表 递增周期：1年 租金递增率：6% 租赁开始时间 2021-03-01 租赁结束时间 2022-03-01 免租开始时间：2021-03-01 免租结束时间：2021-03-31 开始月租金：600 递增周期的时间是从租赁开始时间计算。列表含 计算过程
05-26
可以使用Java中的日期时间类来实现租金计划的生成。具体实现步骤如下： 1. 定义开始日期、结束日期、免租开始日期、免租结束日期以及开始月租金、递增周期等参数，使用...2022-01-01：1082.63 2022-02-01：1147.34 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值