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

【问题标题】：React js diff2html Cannot read property 'getJsonFromDiff' of undefinedReact js diff2html无法读取未定义的属性'getJsonFromDiff'
【发布时间】：2021-02-18 11:49:54
【问题描述】：

链接：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;

【问题讨论】：

标签： javascript reactjs highlight diff2html

【解决方案1】：

好吧，“diff2html”库只公开了“html”和“parse”函数，所以为了像你希望的那样从单个对象 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

【讨论】：

【解决方案2】：

我有同样的问题，我可以像这样访问这些功能：

import * as Diff2HtmlLib from 'diff2html';

Diff2HtmlLib.Diff2Html.getJsonFromDiff(diff, diffOptions)

【讨论】：