web-dev-qa-db-fra.com

Comment convertir une chaîne en jsx?

Comment prendre une chaîne et la convertir en jsx? Par exemple, si j'apporte une chaîne à partir d'un textarea, comment pourrais-je la convertir en un élément React;

var jsxString = document.getElementById('textarea').value;

Quel est le processus que j'utiliserais pour convertir cela sur le client? C'est possible?

reactjsreact-jsx
26
jhamm

Vous pouvez envisager d'utiliser l'attribut JSX dangerouslySetInnerHTML

Exemple d'utilisation ci-dessous:

class YourComponent{

render() {
   someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'

   return(
       <div className="Container" dangerouslySetInnerHTML={{__html: 
        someHtml}}></div>
    )
  }
}

Je sais qu'il est trop tard pour vous :) mais j'espère que cela peut aider quelqu'un d'autre

24
user8296051

Si vous considérez la chaîne

<div>Hello World</div>

Si nous sommes très stricts, c'est en fait le JSX valide. La question est de savoir comment compiler cette chaîne JSX en code React.

Le plus simple et le moyen recommandé est de télécharger une bibliothèque comme Babel et de l'utiliser pour transformer le code. Babel peut s'exécuter dans le navigateur comme le repl fait .

Il est également possible de transformer JSX dans d'autres formats , mais dans ce cas, vous devez trouver un compilateur ou en créer un vous-même.

Les étapes pour créer vous-même la transformation JSX => React sont les suivantes:

  1. transformer la chaîne de code en représentation AST
  2. analyser le AST et renvoyer le code à la chaîne

Vous avez donc besoin d'une sorte d'analyseur AST comme espree supportant JSX et ensuite vous pouvez créer un code qui parcourt l'arborescence AST et génère quelque chose, comme React -code hors de lui.

L'arborescence AST des données JSX se compose de JavaScript AST normal avec des nœuds JSX. L'analyseur doit parcourir l'arborescence et transformer les nœuds JSX en code JavaScript normal.

Si vous compilez vers React et rencontrez un nœud JSX avec la balise "div", vous devez le compiler dans l'appel React.createElement("div",... Avec des attributs et des sous-nœuds trouvés sous ce nœud AST insérés comme paramètres de cet appel .

J'ai créé un petit AST Walker, qui peut traiter l'arborescence AST, ASTWalker , qui peut être utilisé pour transformer l'arborescence AST en un format de sortie , comme React ou DOM.

Voici un exemple en ligne de son utilisation:

http: //codepen.io/teroktolonen/pen/KzWVqx? editors = 1010

Le code principal ressemble à ceci:

    // here is the JSX string to parse
    var codeStr = "<div>Hello world</div>";
    var walker = ASTWalker({
        defaultNamespace: "react",
    });
    // compile AST representation out of it.
    var rawAST = espree.parse(codeStr, {
          ecmaVersion: 6,
          sourceType: "script",
          // specify additional language features
          ecmaFeatures: {
            // enable JSX parsing
            jsx: true
          } 
        });

   // then you can walk the walk to create the code
   walker.startWalk( rawAST, {} );
   var code = walker.getCode();  
   console.log(code); 
   document.getElementById("sourceCode").innerHTML = code;

AVERTISSEMENT: la bibliothèque n'est pas destinée à être compilée dans React. Il est principalement utilisé avec defaultNamespace: "DOM", En l'utilisant pour compiler en représentation JavaScript + DOM simple. Essayer quelque chose de plus compliqué que de simples balises peut entraîner une erreur.

L'important est de remarquer que React n'est pas seulement le format de sortie possible pour JSX.

7
Tero Tolonen

Personnellement, j'aime le faire comme dans la réponse précédente qui recommande l'utilisation de la propriété dangerouslySetInnerHTML dans JSX.

Juste pour une alternative, il existe aujourd'hui une bibliothèque appelée react-html-parser . Vous pouvez le vérifier et installer à partir du registre NPM à cette URL: https://www.npmjs.com/package/react-html-parser . La statistique de téléchargement hebdomadaire d'aujourd'hui pour ce package est 23 696 . Ressemble à une bibliothèque assez populaire à utiliser. Même il semble plus pratique à utiliser, moi-même, j'ai encore besoin de plus de lecture et de considération avant de vraiment l'utiliser.

Extrait de code copié depuis la page NPM:

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}
6
Bayu

J'ai utilisé html-to-react avec un certain succès (les balises à fermeture automatique posent cependant un problème, mais un correctif se trouve dans les demandes d'extraction ...) pour analyser les chaînes de balisage en tant qu'objets de type DOM, et à son tour React. Ce n'est pas joli, et si vous pouvez l'éviter, faites-le. Mais cela fait le travail.

html-to-react sur github: https://github.com/mikenikles/html-to-react

5
dannyjolie

Je suis tombé sur cette réponse récemment et c'était une bonne affaire pour moi. Vous n'avez pas besoin de fournir de chaîne. Le retour d'un tableau d'éléments JSX fera l'affaire.

Nous pouvons stocker des éléments JSX dans un tableau JavaScript.

let arrUsers = [<li>Steve</li>,<li>Bob</li>,<li>Michael</li>];

et dans votre HTML (JSX) le lier comme,

<ul>{arrUsers}</ul>

Aussi simple que cela.

1
Balasubramani M

Voici un petit composant utilitaire pour cela:

const RawHtml = ({ children="", tag: Tag = 'div', ...props }) =>
  <Tag { ...props } dangerouslySetInnerHTML={{ __html: children }}/>;

Exemple d'utilisation:

<RawHtml tag={'span'} style={{'font-weight':'bold'}}>
  {"Lorem<br/>ipsum"}
</RawHtml>
0
TheZver