web-dev-qa-db-fra.com

Créer une chaîne HTML à partir d'un composant React en arrière-plan, comment utiliser la chaîne par dangerouslySetInnerHTML dans un autre composant React

J'essaie de rendre les chaînes LaTeX dans un projet React. Bien que j'utilise les composants react-mathjax React, je veux obtenir un code HTML chaîne faite à partir des chaînes LaTeX afin de la concaténer et les autres chaînes et la définir par dangerouslySetInnerHTML.

Mon code actuel, j'ai essayé

Un exemple de code est ici: https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx

  1. Les chaînes LaTeX sont données sous forme de chaînes
  2. Créez un DOM aDom vide par document.createElement('span') (en arrière-plan. Pas dans l'arborescence DOM du document.)
  3. Rendre une chaîne LaTeX par ReactDOM.render Dans aDom
  4. Après le rendu, obtenez une chaîne par aDom.innerHTML Ou .outerHTML

Problème

La valeur de aDom.innerHTML (Ou .outerHTML) Est "<span><span data-reactroot=\"\"></span></span>" (Presque vide) bien que aDom ait un arbre parfait que MathJax a généré.

Brièvement,

  1. aDom: ????
  2. aDom.outerHTML: ????

ne capture d'écran console.log de aDom et aDom.outerHTML

Question

Comment puis-je obtenir la chaîne HTML "correcte" de aDom ci-dessus?

javascripthtmlreactjsmathjax
11
Nyoho

Cela semble fonctionner très bien si vous souhaitez rendre n'importe quel composant dans une chaîne HTML:

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

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

D'après ce que je vois, vous obtenez ce que vous attendez.

Étant donné un élément racine (aDom dans votre cas), ReactDOM rendra son composant racine à l'intérieur de cet élément, et l'élément de ce composant aura l'attribut data-reactroot.

Donc, ce que vous voyez est exactement comment cela devrait être. D'après ce que j'ai testé, l'arbre de dom intérieur devrait également être là.

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>

Le résultat dans la console est:

<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