Faire une chaîne HTML Réagir à partir d'un composant dans le fond, comment utiliser la chaîne de caractères par dangerouslySetInnerHTML dans un autre composant Réagir

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

Mon code, j'ai essayé

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

  1. LaTeX chaînes sont donnés comme des chaînes
  2. Faire un vide DOM aDom par document.createElement('span') (en arrière-plan. pas dans le document arborescence DOM.)
  3. Rendre un LaTeX string par ReactDOM.render en aDom
  4. Après le rendu, obtenir une chaîne de caractères 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 a un arbre parfait que MathJax généré.

Brièvement,

  1. aDom: 🙆
  2. aDom.outerHTML: 🙅

Une capture d'écran de la console.journal de aDom et aDom.outerHTML

Question

Comment puis-je obtenir les "bons" HTML chaîne de aDom ci-dessus?

InformationsquelleAutor Nyoho | 2017-04-23
  1. 36

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

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

renderToString() {
  return renderToString(<MyAwesomeComponent some="props" or="whatever" />)
}
    InformationsquelleAutor wrdevos
  2. 3

    De ce que je vois, vous obtenez ce que vous vous attendez à obtenir.

    Donné un élément racine (aDom dans votre cas), ReactDOM rendra la racine du composant à l'intérieur de cet élément, et ce composant de l'élément ayant l'attribut data-reactroot.

    Donc ce que vous voyez est exactement la façon dont il devrait être. De ce que j'ai testé, l'intérieur des dom de l'arbre devrait être là aussi.

    JS:

    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);

    HTML:

    <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>
    • Opps, j'obtenais ce que je m'attends à obtenir! Donc, le problème est probablement react-mathjax?
    • Qu'obtenez-vous lorsque vous console.log(c) au début de componentToString fonction?
    • L'insertion console.log(c) dans la ligne 1 de componentToString fonction, j'ai imgur.com/6Q9sjNm (Il me semble être un Réagir élément.)
    • Je vois sur la capture d'écran que vous avez posté dans la question que MathJax insère une balise script dans les DOM et, probablement, rend la sortie correspondant à la durée. Je crois que c'est la raison pour laquelle vous trouverez la durée de vide lors du rendu de la mémoire. Si vous avez besoin de le faire de cette façon, vous pourriez faire une div invisible dans le réel DOM (display: none) et le rendu de votre composante. Vous devriez obtenir la totalité du contenu.
    • Je suppose que je ne le comprends pas... Quelle est la différence entre votre exemple de code ci-dessus et mon MathJax cas? Pourquoi ne pas votre cas de besoin de faire un div invisible dans un vrai DOM de la page?
    • L'exécution de la script tag est fait par le navigateur lorsque ce script est présent dans les DOM. Lors du rendu de la MathJax en mémoire dans componentToString, la balise script est inséré, mais il n'est pas exécuté comme il n'a pas atteint le navigateur DOM, de sorte que le texte n'est pas présent. En général, il est considéré comme une mauvaise pratique d'avoir script balises à l'intérieur de réagir composants.
    • ce code ne fonctionne pas plus, parce que réagir comportement est différent maintenant, et le rendu n'est pas garanti d'être synchrones. Vous avez besoin d'utiliser le callback. Voir github.com/facebook/react/issues/12227

    InformationsquelleAutor squgeim