React中的MathJax，如何确保页面更新正确地在Latex中呈现？

如何解决React中的MathJax，如何确保页面更新正确地在Latex中呈现？

对于某些情况，在我的HTML中，我在第一个脚本标签中导入了MathJax源代码：

<html lang="en">
  <head>
    <Meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <Meta name="theme-color" content="#000000" />
    <Meta
      name="description"
      content="Web site created using create-react-app"
    />
    <script type="text/javascript" async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]],displayMath: [["$$","$$"]],["\\[","\\]"]
        processEscapes: true
    }
});
</script>
    <script type="text/javascript" src="https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Ne computational engine</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

然后我创建了一个React组件：



class Latex extends React.Component{
  constructor(props){
    super(props)
    this.node = React.createRef();
  }

  componentDidMount(){
    this.renderMath();
  }

  componentDidUpdate(){
    this.renderMath();
  }

  renderMath(){
    window.MathJax.Hub.Queue([
      "Typeset",window.MathJax.Hub,this.node.current
    ]);
  }

  render(){
    const {text} = this.props;
    return <div ref = {this.node}> {this.props.children}</div>;
  }
}

export default Latex;

这样我可以将我的App组件嵌套在其中：

ReactDOM.render(
  <Latex>
    <App />
  </Latex>,document.getElementById('root')
);

在第一次安装组件时，它工作正常，因此，如果我在我的应用程序组件的标签中包含$$ \ phi $$，它将在Latex中完全呈现。

但是，在另一个React组件中，该组件在提交表单后从后端获取数据然后显示它，所有显示的数据都不在Latex中呈现。

要添加数据，我具有以下组件和帮助程序功能，虽然很杂乱，但效果很好。（除了mathjax似乎没有将文本呈现到Latex的事实之外）

class CLI extends React.Component{
  constructor(props){
    super(props)
    this.state = {value: '',interepreted: '',label: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event){
    this.setState({value: event.target.value})
  }

  handleSubmit(event){

    event.preventDefault()
    const url = "/input"

    const ul = document.getElementById("ul-info")
    let resp = ""
  fetch(url+"/commands",{method: "POST",body: JSON.stringify(this.state.value),headers: new Headers({
    "content-type": "application/json"
  })}
  ).then(function(response) {
  resp = response
  response.json().then(function(data) {

    console.log(data);
    process_commands(ul,data)


  });
})
.catch(function(error) {
  console.log("Fetch error: " + error);
});
  }

  render(){
    return(
      <form onSubmit = {this.handleSubmit}>
        <label>
          <textarea value ={this.state.value}
            onChange = {this.handleChange} draggable = "false" cols = "70" rows = "2"/>
            <input type = "submit" value = "=" />

        </label>

      </form>
    )
  }
}

除以下辅助功能外：

function createNode(element){
  return document.createElement(element);
}

function append(parent,el){
  return parent.appendChild(el);
}

function process_commands(ul,data){
  var n;
  var i;
  var j;
  var k;
  for(n = 0; n<data.info.length;n++){
    if(data.labels[n] != null){
    let label = createNode("h2");
    label.innerHTML = `${data.labels[n]}`;
    append(ul,label);
    }
    if(data.labels[n] == "zeroes" || data.labels[n] == "partialderivative" || data.labels[n] == "partialintegral"){
    for(i = 0; i <data.info[n].length;i++){
      let sublabel = createNode("h3");
      sublabel.innerHTML = `${data.info[n][i][0]}`;
      append(ul,sublabel);
      for(j = 0; j<data.info[n][i][1].length; j++){
        let sublabel_function  = createNode("h4");
        sublabel_function.innerHTML = `${data.info[n][i][1][j][0]}`;
        append(ul,sublabel_function);
        for(k=0; k<data.info[n][i][1][j][1].length; k++){
          let solution = createNode("p");
          solution.innerHTML = `${data.info[n][i][1][j][1][k][0]}` + " : " + `${data.info[n][i][1][j][1][k][1]}`;
          append(ul,solution)
        }
      }
    }
  }
  }
}

但是Latex组件不会将这些新创建的标签呈现到Latex中。我在想，也许我以不想要的方式使用Mathjax，或者以与LatexReact组件的componentdidUpdate（）方法不兼容的方式添加了新的HTML标签。数小时以来，我一直在努力寻找解决方法，并且我在此处关注了MathJax上的其他帖子，但是他们都没有解决这个问题（或者所有修复都没有改变任何东西）。

（提醒一下，数据显示的很好，但是使用普通文本而不是Latex）