在React中覆盖花括号以允许LaTeX解析

Question

简单的问题。我试图在React组件中使用MathJax渲染LaTeX。对于分组的子/超级脚本 - 例如，X_{foo} - 花括号被视为JSX，并且反应为foo not defined。

简单的解决方法？

Answer 1

JSX中的任何javascript表达式都需要用大括号括起来。请尝试：{X_{foo}}而不是X_{foo}

Answer 2

您使用的是react-mathjax包吗？

例如，我正在使用react-mathjax2 npm包。然后我可以通过用单引号括起MathJax表达式或者用双反斜杠转义它们来渲染它们：

const eXY = 'e=\\{x,y\\}';
const Pxy = 'P_{xy}';

没有分隔符的LaTeX内联显示示例：

import MathJax from 'react-mathjax2'

return (
    <div>
        <MathJax.Context input='tex'>
            <div>
                Inline math formula with one expression: 
                <MathJax.Node inline>{'e=\\{x,y\\}'}</MathJax.Node> 
                and another: <MathJax.Node inline>{'P_{xy}'}</MathJax.Node>
            </div>
        </MathJax.Context>
    </div>
);