mathjax渲染整个页面，而不是在react js中应用的任何地方

Question

Iam在我的reactjs应用程序中使用react-mathjax-preview和react-summernote编辑器，当我输出数学方程式时，获得正确的输出，但它也适用于我不需要的编辑器。 mathjax呈现整个页面，而不是应用在任何地方，并生成多余的多余HTML代码。如何解决呢？谢谢

// summernote组件

import React, { useEffect, useState } from "react";
import MathJax from "react-mathjax-preview";
import ReactSummernote from "react-summernote";
import "react-summernote/dist/react-summernote.css";
import "bootstrap/js/dist/modal";
import "bootstrap/js/dist/dropdown";
import "bootstrap/js/dist/tooltip";
import "bootstrap/dist/css/bootstrap.css";

const SummerNote = props => {
let HTMLstring ='$x^4$ $xx$<font color="#4d4d4d" face="Alegreya"><span>A group of plants or animals with similar characters of any rank is Taxon.</span></font><br/><div><font color="#4d4d4d">Taxa are arranged in a hierarchy from kingdom to subspecies, a given taxon ordinarily includes several taxa of lower rank.&#160;<br/></font></div><div><font color="#4d4d4d">So, the correct answer is \'Taxon\'.</font></div>';

const [EditorState, setEditorState] = useState();
const onChange = content => {
    setEditorState(content);
return (
    <div className="SummerNote">
      <ReactSummernote
        id="summernote"
        value={HTMLstring}
        options={{
          height: 200,
          fontSize: "200px",
          dialogsInBody: true,
          fontSize: 44,
          toolbar: [
            ["style", ["style"]],
            ["color", ["color"]],
            ["font", ["bold", "underline", "clear"]],
            ["font", ["strikethrough", "superscript", "subscript"]],
            ["fontname", ["fontname"]],
            ["fontsize", ["fontsize"]],
            ["para", ["ul", "ol", "paragraph"]],

            ["table", ["table"]],
            ["insert", ["link", "picture", "video"]],

            ["remove", ["removeMedia"]],
            ["view", ["fullscreen", "codeview", "help"]],
            ["height", ["height"]]
          ],
          prettifyHtml: false,
          iframe: true,
          airMode: false,
          styleWithSpan: true,
          direction: "ltr",
          codemirror: {
            mode: "htmlmixed",
            lineWrapping: true,
            lineNumbers: "true",

            theme: "monokai"
          }
        }}
        onChange={onChange}
      ></ReactSummernote>

      <MathJax math={EditorState} />
    </div>
  );
};
export default SummerNote;

// app.js

import React from "react";
import "./App.css";
import SummerNote from "./SummerNote";
function App() {
  return (
    <div className="App">
      <SummerNote />
    </div>
  );
}

export default App;

// package.json依赖项

 "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-mathjax-preview": "^0.1.16",
    "react-scripts": "3.2.0",
    "react-summernote": "^2.0.0"
  },

这是我的链接mathjax previewreact summernote和what is Mathjax

Answer 1

最终由我自己解决了这个问题。我没有做任何更改，问题是mathjax排版，因此，每次我从数据库中获取数据时，我总是会获取新数据，因此mathajax必须排版新数据。