Question

我正在使用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不要更改此属性？

Answer 1

您正在寻找MathJax React component。

导入程序包，并用一些包含您的形式的文本填充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} />
  }
}

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

PS：我在他们的仓库中看到一个issue related to MathML。此处介绍了一种解决方法。

使用MathML标签反应16个HTML属性

1 个答案: