web-dev-qa-db-ja.com

バックグラウンドでReactコンポーネントからHTML文字列を作成し、別のReact=コンポーネントでdangerlySetInnerHTMLによって文字列を使用する方法

ReactプロジェクトでLaTeX文字列をレンダリングしようとしています。 _react-mathjax_ Reactコンポーネントを使用しますが、LaTeX文字列から作成されたHTML文字列を取得して、それと他の文字列を連結し、dangerallySetInnerHTMLで設定したいです。

私が試した私の現在のコード

サンプルコードはこちら： https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx

  1. LaTeX文字列は文字列として与えられます
  2. document.createElement('span')によって空のDOM aDomを作成します（ドキュメントDOMツリーではなく、バックグラウンドで。）
  3. _ReactDOM.render_によってLaTeX文字列をaDomにレンダリングします
  4. レンダリング後、_aDom.innerHTML_または_.outerHTML_で文字列を取得します

問題

aDomにはMathJaxが生成した完全なツリーがありますが、_aDom.innerHTML_（または_.outerHTML_）の値は_"<span><span data-reactroot=\"\"></span></span>"_（ほとんど空）です。

簡単に言えば、

  1. aDom：????
  2. _aDom.outerHTML_：????

aDomおよび_aDom.outerHTML_のスクリーンショットconsole.log

質問

上記のaDomから「正しい」HTML文字列を取得するにはどうすればよいですか？

javascripthtmlreactjsmathjax
11
Nyoho

コンポーネントをHTML文字列にレンダリングする場合、これはうまく機能するようです：

import { renderToString } from 'react-dom/server'

renderToString() {
  return renderToString(<MyAwesomeComponent some="props" or="whatever" />)
}
41
wrdevos

私が見るものから、あなたはあなたがあなたが得ると期待するものを得ています。

ルート要素（あなたの場合はaDom）が与えられると、ReactDOMはこの要素内にルートコンポーネントをレンダリングし、このコンポーネントの要素は属性data-reactrootを持ちます。

ですから、あなたが見ているのは、それがどうあるべきかということです。私がテストしたことから、内部のdomツリーもそこにあるはずです。

var Another = React.createClass({
  render: function() {
    return (
      <div>Just to see if other components are rendered as well</div>
    );
  }
});

var Hello = React.createClass({
  render: function() {
    return (
      <div id="first"> 
        <div id="sec-1">Hello</div>
        <div id="sec-2">{ this.props.name }</div>
        <Another />
      </div>
    );
  }
});

var a = document.createElement('div');

ReactDOM.render(
  <Hello name = "World" /> ,
  a
);

console.log(a.outerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

コンソールの結果は次のとおりです。

<div><div data-reactroot="" id="first"><div id="sec-1">Hello</div><div id="sec-2">World</div><div>Just to see if other components are rendered as well</div></div></div>
3
squgeim