在 React 組件中渲染數學

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>
    );
}
}

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<\/a>或react-formula-<\/a> beautifier 。 並像使用另一個組件一樣使用它們（這就是 react 的工作方式）。

這里<\/a>有官方的例子。

建議：<\/strong>如果你想在 react 中使用一些 lib，請嘗試搜索 react-nameoflib。 大多數圖書館都有他的反應版本。

Answer 3

哦不，當我發現自己做錯了什么時，我對自己非常失望。 我將 Block 的顯示應用於渲染 Latex 的 Span 元素（我的看法是它將整個塊視為一個），並將每個 Equation 字符放在單獨的行上。 將顯示更改為“內聯”解決了這個問題。

"

Answer 4

在 Component 類declare var MathJax;<\/code> . 它應該無縫工作。

"

Answer 5

已經有幾年了，但是如果有人正在尋找基於功能 + mathjax3 的方法，那么這里有這個 repo：

https:\/\/github.com\/jpribyl\/react-hook-mathjax<\/a>