在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

你忘了问一个问题。 “这是一团糟”是什么意思？请明确点。 –

就像我附加的截图中的混乱渲染一样。每个公式字符独立在一行上（如块元素） – 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。大多数图书馆都有他的反应版。

我尝试了react-mathjax，它仍然呈现在附加的截图中。 – Ionware

尝试使用开发工具在浏览器上设置它的样式。 – arracso

谢谢，重新设计它正是我需要做的。 – Ionware

答

哦不，当我发现自己做错了事情时，我对自己感到非常失望。我将Block的显示应用于渲染Latex的Span元素（我认为它会将整个块视为一个块），并将每个等式字符放在单独的行上。将显示更改为“内联”可以解决问题。

答

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

在React组件中渲染数学

相关推荐