React 中的 MathJax，如何確保正確更新 Latex 中的頁面渲染？

Question

對於某些情況，在我的 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 中）

Answer 1

根據我的調查，即使孩子有變化，Mathjax 也不會排版，這里的簡單檢查是將一個道具傳遞給 Latex 組件，要么是日期時間，要么在每次 DOM 發生變化時更改該道具，所以 LATEX 組件將獲取道具更改，因此它將觸發 MathJax 排版，它對我有用。

React 中的 MathJax，如何確保正確更新 Latex 中的頁面渲染？

問題描述

1 個解決方案

解決方案1
0 2021-10-29 10:32:32

React 中的 MathJax，如何確保正確更新 Latex 中的頁面渲染？

問題描述

1 個解決方案

解決方案1 0 2021-10-29 10:32:32

解決方案1
0 2021-10-29 10:32:32