reactjs - parser - react native button icon

¿Cómo convierto una cadena a jsx?

Question

¿Cómo tomaría una cadena y la convertiría a jsx ? Por ejemplo, si traigo una cadena desde un área de textarea , ¿cómo podría convertirla en un elemento React ;

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

¿Cuál es el proceso que usaría para convertir esto en el cliente? ¿Es posible?

Answer 1

Encontré esta respuesta recientemente y fue un buen negocio para mí. No es necesario proporcionar una cadena. Devolver una matriz de elementos JSX hará el truco.

Podemos almacenar elementos JSX en la matriz de JavaScript.

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

y en su HTML (JSX) enlazarlo como,

<ul>{arrUsers}</ul>

Tan simple como es.

Answer 2

He estado usando html-to-reaccion con cierto éxito (las etiquetas de cierre automático causan un problema, pero hay una solución en las solicitudes de extracción ...) para analizar cadenas de marcas como objetos similares a DOM y, a su vez, reaccionar elementos. No es bonito, y si puedes evitarlo, hazlo. Pero hace el trabajo.

html-to-reaccion en github: https://github.com/mikenikles/html-to-react

Answer 3

Necesitas usar babel con preset react

npm install --save-dev babel-cli babel-preset-react

Agregue la siguiente línea a su archivo .babelrc :

{
  "presets": ["react"]
}

Entonces corre

./node_modules/.bin/babel script.js --out-file script-compiled.js

Puedes encontrar más información here

Answer 4

Personalmente, me encanta hacerlo como en la respuesta anterior, que recomienda el uso de la propiedad dangerouslySetInnerHTML en JSX.

Solo por una alternativa, hoy en día hay una biblioteca llamada react-html-parser . Puede verificarlo e instalarlo desde el registro de NPM en esta URL: https://www.npmjs.com/package/react-html-parser . La estadística de descarga semanal de hoy para ese paquete es 23.696 . Parece una biblioteca bastante popular para usar. Incluso parece más conveniente de usar, yo mismo, todavía necesito más lectura y mayor consideración antes de usarlo realmente.

Fragmento de código copiado de la página 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>;
  }
}

Answer 5

Puede considerar el uso del atributo JSX de forma dangerouslySetInnerHTML

Ejemplo de uso a continuación:

class YourComponent{

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

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

Sé que es demasiado tarde para ti :) pero espero que pueda ayudar a alguien más

Answer 6

Si consideras cadena

<div>Hello World</div>

Si somos muy estrictos, este es el JSX válido. La pregunta es cómo compilar esta cadena JSX en código React.

La forma más sencilla y recomendada es descargar una biblioteca como Babel y usarla para transformar el código. Babel puede ejecutarse en el navegador como lo hace la respuesta .

También es posible transformar JSX a otros formatos , pero en este caso tienes que encontrar un compilador o crear uno por ti mismo.

Los pasos para crear usted mismo la transformación JSX => React son:

1. transformar la cadena de código en representación AST
2. analizar el código AST y el código de salida a la cadena

Así que necesitas un analizador de AST como espree soporta JSX y luego puedes crear un código que recorre el árbol de AST y produzca algo, como React-code fuera de él.

El árbol AST de datos JSX consiste en JavaScript AST normal junto con nodos JSX. El analizador debe recorrer el árbol y transformar los nodos JSX en un código JavaScript normal.

Si compila para Reaccionar y encuentra un nodo JSX con la etiqueta "div", debe compilarlo en React.createElement("div",... llamada con atributos y subnodos encontrados bajo ese nodo AST insertado como parámetros de esa llamada.

He creado un AST Walker pequeño, que puede procesar el árbol AST, ASTWalker , que se puede usar para transformar el árbol AST en algún formato de salida, como React o DOM.

El ejemplo en línea de cómo usarlo está aquí:

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

El código principal se ve así:

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

DESCARGO DE RESPONSABILIDAD: La biblioteca no está diseñada para compilar en React. Se utiliza principalmente con defaultNamespace: "DOM", usándolo para compilar en la representación de JavaScript + DOM simple. Intentar algo más complicado que las etiquetas simples puede resultar un error.

Lo importante es notar que React no es solo un formato de salida posible para JSX.