Question

我正在尝试使用MathJax在React组件中渲染数学方程式。如果我在HTML文件中预先渲染它，它实际上运行良好，但是当我尝试在React中渲染它时，它会很乱。

这是我的代码

class Latex extends React.Component {

constructor(props) {
    super(props);
}

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

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

render() {
    //dangerouslySetInnerHTML={{__html: this.props.children}}
    return (
         <h5 dangerouslySetInnerHTML={{__html: this.props.children}}></h5>
    );
}
}

Math Display both in Regular HTML and React Element

Answer 1

我使用了algebra.js和react-mathjax库的组合来使其在ES6中运行。因为所有这些其他包都维护得很差。对于react-mathjax，请使用此repo。

以下是显示分数的示例：

import React from 'react';
import { Fraction, toTex } from 'algebra.js';
import { Node, Context } from 'react-mathjax';

function Formula(props) {
  return (
    <Context input="tex">
      <Node inline>{props.tex}</Node>
    </Context>
  );
}

export default function FractionDisplay() {
  const a = new Fraction(1, 5);
  const b = new Fraction(2, 7);
  const answer = a.multiply(b);

  const question = <Formula tex={`${toTex(a)} × ${toTex(b)} = ${toTex(answer)}`} />;

  return (
    <div>
      {question}
    </div>
  );
}

Answer 2

你的逻辑很好，但这不是反应的方式。您不使用MathJax，而是使用react-mathjax或react-formula-beautifier。并使用它们就像另一个组件（这是反应的工作方式）。

Here你有一个正确的例子。

建议：如果你想在反应中使用一些lib，请尝试搜索react-nameoflib。大多数图书馆都有他的反应版本。

Answer 3

哦，不，当我发现自己做错了什么时，我对自己很失望。我将Block的显示应用于渲染Latex的Span元素（我认为它将整个块视为一个），并将每个Equation字符放在一个单独的行上。将显示更改为“内联”修复了问题。

Answer 4

将其添加到组件类declare var MathJax;之前。它应该可以无缝运行。

在React组件中渲染数学

4 个答案: