使用react.js动态mathjax

Question

我试图在react.js页面上组合markdown示例并尝试使用mathjax渲染方程式。 （ jsFiddle ）

理想情况下，它会接受输入

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

并返回积分符号

键入一些markdØWN这里！ ∫

react.js代码直接来自Facebook的页面。 我希望我在正确的地方调用MathJax.Hub.Queue - 他们的文档讨论了动态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页面上有一个类似的例子来处理方程式而不是降价。

Answer 1

您对MathJax.Hub.Queue函数的放置不正确。 请注意，它遵循return语句，因此永远不会执行（因为函数在到达之前返回）。 React.js文档的render()方法的文档表明它不应该修改DOM，所以你不想在这一点上做排版。 既然你正在返回HTML字符串，那么它还没有被添加到DOM中，所以无论如何它都不会被MathJax处理。 文档建议componentDidMount()和componentDidUpdate()是您应该让MathJax排版新数学内容的地方。

我已经调整了你的jsFiddle示例以包含更改。

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