React js diff2html Невозможно прочитать свойство getJsonFromDiff из undefined

Question

Ссылка: codesandbox

У меня следующая проблема, может ли кто-нибудь мне помочь?

Ошибка:

Невозможно прочесть свойство getJsonFromDiff из undefined

-> 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

У меня был тот же вопрос, я смог получить доступ к этим функциям следующим образом:

      import * as Diff2HtmlLib from 'diff2html';

Diff2HtmlLib.Diff2Html.getJsonFromDiff(diff, diffOptions)

Answer 2

Ну, библиотека "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