动态mathjax与react.js [英] dynamic mathjax with react.js

问题描述

我试着降价例如 react.js 页面上组合，并试图有它渲染mathjax方程。 （的jsfiddle ）

I tried to combine the markdown example on the react.js page and tried to have it render equations with mathjax. (jsFiddle)

在理想情况下，将采取在输入

Ideally it would take in an input

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

和返回积分号

键入一些的 markd 的 0 WN 的这里！ ∫

Type some markdown here! ∫

该react.js code是从Facebook的页面直接服用。我希望我叫 MathJax.Hub.Queue 在正确的地方 - 他们的文档具有的动态MathJax ：

The react.js code is taken directly from Facebook's page. I hope I called MathJax.Hub.Queue in the correct place -- their docs have a discussion of 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 处理公式，但网页无法降价。

There is a similar example on the MathJax page that handles equations but not markdown.

推荐答案

您的 MathJax.Hub.Queue 函数的位置不正确。请注意，它遵循收益语句，所以它永远不会被执行（因为函数得到它之前返回）。为渲染（）中的 React.js 文档建议，它不应该修改DOM，所以你不想在这一点上做的排版反正。既然你正在返回的HTML字符串，它并没有被添加到DOM但无论如何，所以它不会在那里MathJax无论如何处理。该文件表明， componentDidMount（）和 componentDidUpdate（）在哪里，你应该有MathJax排版新的数学内容的地方

Your placement of the MathJax.Hub.Queue function is incorrect. Note that it follows the return statement, so it never gets performed (since the function returns before getting to it). The documentation for the render() method of the React.js documentation suggests that it should not modify the DOM, so you don't want to do the typeset at this point anyway. And since you are returning the HTML string, it hasn't been added to the DOM yet anyway, so it would not be there for MathJax to process anyway. The documentation suggests that componentDidMount() and componentDidUpdate() are the places where you should have MathJax typeset the new mathematical content.

我已经调整了自己的的jsfiddle例如，以包括更改。

I've adjusted your jsFiddle example to include the changes.

还请注意，降价是要与你的反斜杠交互，所以它删除了数学分隔符的那些 \\（... \\），你刚刚获得（...），所以MathJa不会看到他们。我已经使用重新配置MathJax MathJax.Hub.Config（）使用美元符号分隔符 $ ... $ 的在线数学（和默认 $$ ... $$ 所显示的数学）。否则，你将需要键入 \\\\（\\\\ ...）来获得反斜杠进入降价输出，其中MathJax可以看到他们（和 \\ \\\\\\（\\ INT \\\\\\\\）在初始字符串）。你可以，当然，配置MathJax使用任何你想要的分隔符，但美元是纯TeX的做法。

Note also that Markdown is going to interact with your backslashes, so it removes the ones for the math delimiters \(...\) and you just get (...), so MathJa won't see them. I've reconfigured MathJax using MathJax.Hub.Config() to use dollar sign delimiters $...$ for in-line math (and the default $$...$$ for displayed math). Otherwise you will need to type \\(...\\) to get the backslashes into the Markdown output where MathJax can see them (and \\\\( \int \\\\) in your initial string). You can, of course, configure MathJax to use whatever delimiters you want, but dollars are the plain TeX approach.

这篇关于动态mathjax与react.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！