React 16 HTML 属性与 MathML 标签

Question

我正在使用 MathML 标记语言在我的网络应用程序上呈现数学方程式。这是一个有问题的简单方程式的示例：

<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 不要更改此属性？

Answer 1

MathJax React component 正是您要找的。

导入包并用一些包含正式形式的文本填充数学属性。将 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} />
  }
}

他们在存储库中也有一个 more advanced demo。

PS：我在他们的回购中看到一个 issue related to MathML。此处描述了解决方法。

React 16 HTML 属性与 MathML 标签

React 16 HTML attributes with MathML tags

mathml

reactjs