2017-05-12 14 views
2

私は最近、Webアプリケーション用のReactJSにアップグレードしました。私はMathJaxでAngularを使ってページ上の数学TeXを自動レンダリングしています(数学がページ上で変更されるたびに、MathJaxはページを通り、区切り文字を見つけ、数学をレンダリングします)。 ReactコンポーネントのライフサイクルでMathJaxを動作させることができず、オンラインで多くの情報がないようです。以前の実装では、ページの変更をリッスンして呼び出しました。リアクション自動レンダリング数学ラテックス

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

数学TeXをReactで自動レンダリングするにはどうすればよいですか(ReactJSを使用する必要があります)?私の数学はテキストの本文とインラインであり、テキスト全体をレンダリングすることなく数学を表現したいと考えています。

ありがとうございます!

ケビン

答えて

2

私は解決策を見つけることができました。また、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> 
    ) 
    } 
} 
関連する問題