大家好~~我是一枚程序鱼🐟
最近发现一款专门用于diff的插件~react-diff-viewer。可支持的功能包括拆分视图、内联视图、单词差异、行高高亮等。当然它的高度也是可定制的。
使用步骤如下:
1.安装插件——yarn i react-diff-viewer or npm i react-diff-viewer
2.引入并使用:
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
完整代码如下:
import React from 'react';
import PropTypes from 'prop-types';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
function DiffPanel({
oldValue,
newValue,
}) {
const oldVerifyConf = JSON.stringify(oldValue, null, 2);
const newVerifyConf = JSON.stringify(newValue, null, 2);
const newStyles = {
variables: {
dark: {
highlightBackground: '#fefed5',
highlightGutterBackground: '#ffcd3c',
},
},
line: {
padding: '10px 2px',
'&:hover': {
background: '#a26ea1',
},
},
contentText: {
width: '390px',
},
};
// const sameCode = React.useMemo(() => (
// newVerifyConf === oldVerifyConf
// ), [newVerifyConf, oldVerifyConf]);
// 折叠块显示内容
const codeFoldMessageRenderer = React.useCallback(num => (
newValue === oldValue ? '修改前后没有区别,点击展开查看' : `展开隐藏的 ${num} 行...`
), [newValue, oldValue]);
return (
<div className="am-diff-panel">
<div className="panel-table">
<p>修改前配置</p>
<p>修改后配置</p>
</div>
<ReactDiffViewer
oldValue={oldVerifyConf}
newValue={newVerifyConf}
styles={newStyles}
codeFoldMessageRenderer={codeFoldMessageRenderer}
splitView
compareMethod={DiffMethod.LINES}
/>
</div>
);
}
DiffPanel.propTypes = {
oldValue: PropTypes.object.isRequired,
newValue: PropTypes.object.isRequired,
};
DiffPanel.defaultProps = {
};
export default DiffPanel;
更多属性和用法可参考:
react-diff-viewer - npmhttps://www.npmjs.com/package/react-diff-viewer在代码中,涉及到JSON.stringify()用法~~
在MDN文档中,有说明JSON.stringify是用于——把js对象或值转化为JSON格式的。那你清楚它的用法吗?
JSON.stringify(value[, replacer [, space]]);
JSON.stringify的参数有三个:
value
: 将要序列后成 JSON 字符串的值。replacer
(可选)- 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;
- 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的
JSON
字符串中 - 如果该参数为
null
或者未提供,则对象所有的属性都会被序列化。
space
(可选): 指定缩进用的空白字符串,用于美化输出- 如果参数是个数字,它代表有多少的空格。上限为10。
- 该值若小于1,则意味着没有空格
- 如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格
- 如果该参数没有提供(或者为 null),将没有空格