javascript - 动态 mathjax 与 react.js

Question

我尝试结合 react.js 上的 Markdown 示例页面并尝试让它用 mathjax 渲染方程式。 ( jsFiddle )

理想情况下它会接受一个输入

 Type some *markd**o**wn* here! $$ int $$

并返回积分符号

Type some markdown here! ∫

react.js 代码直接取自 Facebook 的页面。我希望我在正确的地方调用了 MathJax.Hub.Queue——他们的文档讨论了 dynamic MathJax :

/** @jsx React.DOM */

var converter = new Showdown.converter();

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Type some *markdown* here! \\\( \int \\\)'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    console.log(this.state.value);
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          id="input"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          id="output"
          dangerouslySetInnerHTML={{
            __html: converter.makeHtml(this.state.value)
          }}
        />
      </div>
    );
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"output"]);
  }
});

React.renderComponent(<MarkdownEditor />,  document.getElementById('content'))

MathJax 上有一个类似的例子处理方程式但不处理 Markdown 的页面。

Answer 1

您对 MathJax.Hub.Queue 函数的放置不正确。请注意，它跟在 return 语句之后，因此它永远不会被执行(因为函数在到达它之前就返回了)。 React.js 的 render() 方法的文档文档建议它不应该修改 DOM，因此您无论如何都不想在此时进行排版。由于您返回的是 HTML 字符串，它还没有被添加到 DOM 中，所以无论如何 MathJax 都不会处理它。文档建议 componentDidMount() 和 componentDidUpdate() 是您应该让 MathJax 排版新数学内容的地方。

我已经调整了你的jsFiddle example包括更改。

另请注意，Markdown 将与您的反斜杠进行交互，因此它会删除数学定界符 \(...\) 的反斜杠，您只会得到 (...) ，所以 MathJa 不会看到它们。我已经使用 MathJax.Hub.Config() 重新配置了 MathJax，以使用美元符号分隔符 $...$ 进行内联数学运算(以及默认的 $ $...$$ 用于显示数学)。否则，您将需要键入 \\(...\\) 将反斜杠放入 MathJax 可以看到它们的 Markdown 输出中(并且 \\\\(\int\\\\) 在你的初始字符串中)。当然，您可以将 MathJax 配置为使用您想要的任何分隔符，但美元是普通的 TeX 方法。