Convierta la cadena React Component a jsx nuevamente

Question

Tengo una pregunta, porque leí el archivo javascript de NodeJS y lo envié al cliente y aquí revivo todo el archivo como una cadena (lo cual es obvio) y aquí está mi pregunta. ¿Hay alguna solución para convertir el componente de cadena nuevamente al jsx? No se trata solo de etiquetas html, por lo que dangerouslySetInnerHTMLo métodos similares no funcionan.

Mis componentes de cadena se parecen al componente React típico, algo así:

import React from 'react';
import { Row } from 'react-bootstrap;
import Home from './Home'
     ......
const Index = () => {
   const renderHelloWorld = <h1>Hello World</h1>

   return (
      <div>{renderHelloWorld}</div>
   )
}

export default Index;

Entonces, esta es una cadena con la que estoy luchando para convertirla a jsx (tal vez esto sea imposible) y debería usar Server Side Rendering with React methodfs like ReactDOMServer?

Answer 1

Prueba esta biblioteca https://www.npmjs.com/package/react-html-parser.

Una utilidad para convertir cadenas HTML en componentes React. Evita el uso peligroso de SetInnerHTML y convierte elementos HTML estándar, atributos y estilos en línea en sus equivalentes de React.

Answer 2

Puede usar simplemente JavaScript antiguo para hacer el truco.

document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;

Otra opción con react.js es el uso de dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />

O puede usar html-react-parser.

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>

Answer 3

Por lo tanto, la solución para mi problema es muy popular y simple (en la etapa inicial del proyecto), para comprender el problema y solucionarlo, debemos volver a la parte del servidor de la aplicación. Para Reactlas aplicaciones, si queremos renderizar el archivo jsx desde el servidor, tenemos que usar el renderizado del lado del servidor y el problema anterior desaparecerá. Tal vez muestro paso a paso cómo habilitar el renderizado del componente React en el servidor.

1. Configure el backend para habilitar las características de ES6

   Instalar paquetes de babel

   npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev
   

   Hay muchas formas de configurar Babel, yo uso la más cercana package.jsonpara esto.

   {
     ......,
     /*This have to be in the top level in package.json*/
   
     "babel":{
       "presets":[
         "@babel/preset-env",
         "@babel/preset-react" 
       ]
     }
   }
   

Más información sobre paquetes y configuraciones de babel:https://babeljs.io/docs/en/

1. Enviar el componente React al cliente

   Para esto, tenemos que instalar los paquetes react y react-dom en el lado del servidor.

   npm install react react-dom
   

   Por ejemplo, en su servidor, js o archivo route.js:

    ....  //necesarry imported modules
    import ReactDOMServer from 'react-dom/server'
    import Index from './Index';
   
   router.get('/exampleRoute', (req, res) => {
   
      .... //your route business logic
   
      res.send(ReactDOMServer.renderToString(<Index/>))
   })
   

2. Vista de renderizado en el cliente

   ...//correct React component
   const[state, setState] = useState({Component: ''});
   
   fetch('/exampleRoute')
    .then(response => response.json())
     .then(data => setState(state => ({...state, Component: data.data));
   
   ....
   
   return(
     <div dangerouslySetInnerHTML={{ __html: state.Component }}></div>
   )
   

Este es solo un ejemplo simple de cómo puede renderizar el componente React desde el backend si esto es necesario. Esta no es una guía para la representación compleja del lado del servidor en la aplicación, que es algo más complicado, pero no es difícil.