我想用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组件的数组。 –