Question

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

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

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

并返回积分符号

在此输入一些标记 o wn ！ ∫

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页面上有一个类似的例子来处理方程而不是降价。

Answer 1

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

我已调整您的jsFiddle example以包含更改。

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

使用react.js动态mathjax

1 个答案: