リアクションコンポーネント内での数学のレンダリング

Question

私はMathJaxを使ってリアクションコンポーネントで数式をレンダリングしようとしています。 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

あなたのロジックは良いのですが、これは作品を反応させる方法ではありません私のコードです。 MathJaxを使用する代わりに、なぜreact-mathjaxまたはreact-formula-beautifierを使用しないでください。別のコンポーネントと同じように使用します（これは、反応がどのように機能するかを示しています）。

Hereあなたには例があります。

アドバイス：リアクションでいくつかのlibを使いたい場合は、react-nameoflibを検索してみてください。ほとんどの図書館は彼の反応版を持っています。

Answer 2

ああ、私が間違っていたことを見つけたとき、私はとても失望していました。私はLatexをレンダリングするSpan要素にBlockの表示を適用しました（私の考えは、全体のチャンクを1つとして扱うということでした）。そして、各方程式文字を別々の行に置きました。ディスプレイを「インライン」に変更すると問題が解決しました。

Answer 3

私はと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> 
); 
}