我正在使用 MathML 标记语言在我的 Web 应用程序上呈现数学方程。这是一个有问题的简单方程的示例：
<math xmlns="http://www.w3.org/1998/Math/MathML"><mfenced open="[" close="]"><mn>8</mn></mfenced></math>
问题是 React 不会像我们想要的那样处理 mfenced 标签的属性。它将“ open ”属性视为在 HTML 上下文中使用，因此不会接受其“[”值。React 会像这样输出 mfenced 标签：
<mfenced open close="]"><mn>8</mn></mfenced>
当然，这打破了浏览器中的等式。有没有办法告诉 React 不要改变这个属性？
该MathJax阵营成分是什么，你所期待的。
导入包并用一些包含形式的文本填充 math 属性。将 TeX 包裹在 $ 或 $$ 中，将 ASCIImath 包裹在 ` 中。按原样粘贴 MathML。
下面是一个例子：
import React, {Component} from 'react'
import {render} from 'react-dom'
import MathJax from 'react-mathjax-preview'
const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Because of the backtick
const math = String.raw`
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<menclose notation="circle box">
<mi> x </mi><mo> + </mo><mi> y </mi>
</menclose>
</math>
$$\lim_{x \to \infty} \exp(-x) = 0$$
${asciimath}`
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
math: tex
}
render() {
return <MathJax math={this.state.math} />
}
}
他们在存储库中还有一个更高级的演示。
PS：我在他们的 repo 中看到了一个与 MathML 相关的问题。那里描述了一种解决方法。