React 自动渲染 Math Latex答案

【问题标题】：React auto-render Math LatexReact 自动渲染 Math Latex
【发布时间】：2017-05-13 02:21:58
【问题描述】：

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

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

如何使用 React 自动渲染数学 TeX（我什至应该使用 ReactJS）？请注意，我的数学与正文是内联的，我想在不渲染整个文本的情况下渲染数学。

提前致谢！

凯文

【问题讨论】：

标签： reactjs mathjax katex

【解决方案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>
    )
  }
}

【讨论】：