在React組件中渲染數學

我想用MathJax在React組件中渲染數學公式。如果我在HTML文件中預渲染它，它確實運行良好，但當我嘗試在React中渲染它時，它確實很糟糕。在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

來源

2017-07-14 Ionware

你忘了問一個問題。「這是一團糟」是什麼意思？請明確點。 –

就像我附加的截圖中的混亂渲染一樣。每個公式字符獨立在一行上（如塊元素） – Ionware

如果您可以在[snippet]中重現問題，那麼調試會更容易（https://stackoverflow.blog/2014/09/16 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。無論如何，一個問題是傳遞給'dangerouslySetInnerHTML'的對象的'__html'屬性應該是一個字符串，但是'this.props.children'將是一個React組件的數組。 –

你的邏輯是好的，但不是這種方式作出反應的作品。爲什麼不使用react-mathjax或react-formula-beautifier，而不是使用MathJax。並像使用另一個組件一樣使用它們（這就是反應如何起作用）。

Here你有正式的例子。

建議：如果您想在反應中使用某些庫，請嘗試搜索react-nameoflib。大多數圖書館都有他的反應版。

來源

2017-07-14 15:25:37 arracso

我嘗試了react-mathjax，它仍然呈現在附加的截圖中。 – Ionware

嘗試使用開發工具在瀏覽器上設置它的樣式。 – arracso

謝謝，重新設計它正是我需要做的。 – Ionware

哦不，當我發現自己做錯了事情時，我對自己感到非常失望。我將Block的顯示應用於渲染Latex的Span元素（我認爲它會將整個塊視爲一個塊），並將每個等式字符放在單獨的行上。將顯示更改爲「內聯」可以解決問題。

來源

2017-07-15 15:51:45 Ionware

我使用了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> 
); 
}

來源

2018-02-14 13:57:38 Ansjovis86

在React組件中渲染數學

回答

相關問題