reactjs - React 自动渲染 Math Latex

Question

我最近将我的 Web 应用程序升级到了 ReactJS。我一直在使用 Angular 和 MathJax 在页面上自动渲染数学 TeX(每次页面上的数学发生变化时，MathJax 都会遍历页面，找到分隔符并在适当的位置渲染数学)。我无法让 MathJax 与 React 组件生命周期配合使用，而且网上似乎没有太多信息。我之前的实现是监听页面的变化并调用:

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

我如何使用 React 自动渲染 math TeX(我是否应该使用 ReactJS)？请注意，我的数学与文本正文内联，我想渲染数学而不渲染整个文本。

提前致谢!

凯文

Answer 1

我找到了解决方案。还要确保 MathJax 脚本链接正确，因为 MathJax took down their CDN .

class Preview extends React.Component {

  componentDidMount () {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub, ReactDOM.findDOMNode(this)]);
  }

  componentDidUpdate () {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub, ReactDOM.findDOMNode(this)]);
  }

  render () {
    var tex= this.props.name,

    if(!!tex) {
      texDisplay = "$$" + tex + "$$"
    }
    return (
      <div>The Tex!</div>
      <div>{texDisplay}</div>
    )
  }
}