I am trying to Render Math Equation in a React Component with MathJax. It actually worked well if I pre-render it within the HTML file, but it is a mess when i try rendering it in React.
Here's my code
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>
);
}
}
Oh no, I was so disappointed in myself when I found out what I was doing wrong. I applied display of Block to the Span element that renders the Latex (My take was that it would treat the whole chunk as one) and it put each Equation character onto a separate line. Changing the display to "inline" fixed the problem.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments