React js diff2html 无法读取未定义的属性 'getJsonFromDiff'

Question

链接：codesandbox

我有以下问题，有人能帮我吗？

错误：

无法读取未定义的属性"getJsonFromDiff">

->let outStr=Diff2Html.getJsonFromDiff(dd，｛

CodeDiff.js:

import React, { Component } from "react";
import PropTypes from "prop-types";
import { createPatch } from "diff";
import { Diff2Html } from "diff2html";
import { InlineMath } from "react-katex/dist/react-katex";
import "highlight.js/styles/googlecode.css";
import "diff2html/lib/diff2html";
function CodeDiff(props) {
const { oldStr, newStr, context, outputFormat } = props;
const createdHtml = (oldString, newString, context, outputFormat) => {
function hljs(html) {
return html.replace(
/<span class="d2h-code-line-ctn">(.+?)</span>/g,
'<span class="d2h-code-line-ctn"><code>$1</code></span>'
);
}
let args = [
"",
oldString || "",
newString || "",
"",
"",
{ context: context }
];
let dd = createPatch(...args);
let outStr = Diff2Html.getJsonFromDiff(dd, {
inputFormat: "diff",
outputFormat: outputFormat,
showFiles: false,
matching: "lines"
});
let html = Diff2Html.getPrettyHtml(outStr, {
inputFormat: "json",
outputFormat: outputFormat,
showFiles: false,
matching: "lines"
});
return hljs(html);
};
const html = () => createdHtml(oldStr, newStr, context, outputFormat);
return (
<div id="code-diff" dangerouslySetInnerHTML={{ __html: html() }}></div>
);
}
CodeDiff.propTypes = {
oldStr: PropTypes.string.isRequired,
newStr: PropTypes.string.isRequired,
context: PropTypes.number,
outputFormat: PropTypes.string
};
CodeDiff.defaultProps = {
oldStr: "",
newStr: "",
context: 5,
outputFormat: "line-by-line"
};
export default CodeDiff;

Answer 1

好吧，"diff2html"；库只公开"；html"；以及"；解析"；函数，所以为了像你想要的那样从单个对象Diff2Html中使用它，你必须不同地导入它，比如：

import * as Diff2Html from "diff2html";

但是那里没有getJsonFromDiff和getPrettyHtml这样的东西不确定你从哪里得到的，getJsonFromDiff实际上是他们github中的一个测试名称-https://github.com/rtfpessoa/diff2html/search?q=getJsonFromDiff但这不是一种功能。而且根本没有getPrettyHtml这样的东西

所以我想你想使用parse(而不是getJsonFromDiff(和html(而不是getPrettyHtml(，就我所知，它可以很好地工作https://codesandbox.io/s/material-demo-forked-jhljq?file=/CodeDiff.js:114-153

Answer 2

我也有同样的问题，我能够访问以下函数：

import * as Diff2HtmlLib from 'diff2html';
Diff2HtmlLib.Diff2Html.getJsonFromDiff(diff, diffOptions)