React 中的 MathJax，如何确保在 Latex 中正确渲染页面的更新？答案

【问题标题】：MathJax in React, how to make sure updates to the page render in Latex correctly?React 中的 MathJax，如何确保在 Latex 中正确渲染页面的更新？
【发布时间】：2020-12-09 07:04:41
【问题描述】：

对于某些上下文，在我的 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 中）

【问题讨论】：

如果你能把你的程序放在 CodeSandbox 中会很有帮助
代码沙箱是否支持烧瓶后端，还是我必须重写获取部分才能从另一个后端获取？
当然，它支持任何后端，只要您从普通 url 调用 api

标签： javascript html reactjs mathjax

【解决方案1】：

根据我的调查，即使子项发生变化，Mathjax 也不会排版，这里的简单检查是将一个道具传递给 Latex 组件，要么是日期时间，要么在每次 DOM 发生变化时更改该道具，所以LATEX 组件将获得 prop 更改，因此它将触发 MathJax 排版，它对我有用。

【讨论】：