0

链接：codesandbox

我遇到以下问题有人可以帮助我吗？

错误：

无法读取未定义的属性“getJsonFromDiff”

-> 让 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;
4

2 回答 2

0

好吧，“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

于 2020-11-05T18:42:20.463 回答
0

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

import * as Diff2HtmlLib from 'diff2html';

Diff2HtmlLib.Diff2Html.getJsonFromDiff(diff, diffOptions)
于 2021-01-11T18:12:32.957 回答