Converta string React Component para jsx novamente

Aug 17 2020

Eu tenho uma pergunta, porque li o arquivo javascript do NodeJS e enviei para o cliente e aqui recebo todo o arquivo como string (o que é óbvio) e aqui está minha pergunta. Existe alguma solução para converter o componente string novamente para o jsx? Isso não é apenas tags html, então dangerouslySetInnerHTMLmétodos semelhantes não funcionam.

Meus componentes de string se parecem com componentes típicos do React, algo assim:

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;

Então, esta é a string que estou lutando para convertê-la em jsx (talvez isso seja impossível) e devo usar a renderização do lado do servidor com métodos React como ReactDOMServer?

Respostas

brijesh-pant Aug 17 2020 at 13:52

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

Um utilitário para converter strings HTML em componentes React. Evita o uso de perigosamenteSetInnerHTML e converte elementos HTML padrão, atributos e estilos inline em seus equivalentes React.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

Você pode usar simplesmente o velho JavaScript para fazer o truque.

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

Outra opção com react.js é o uso de arquivos dangerouslySetInnerHTML.

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

Ou você pode usar html-react-parser.

import Parser from 'html-react-parser';

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

<div>{Parser(renderHelloWorld)}</div>
Mat.Now Aug 18 2020 at 14:12

Portanto, a solução para o meu problema é muito popular e simples (no estágio inicial do projeto). Para entender o problema e corrigi-lo, precisamos voltar à parte do servidor do aplicativo. Para Reactaplicativos, se quisermos renderizar o arquivo jsx do servidor, temos que usar a renderização do lado do servidor e o problema acima desaparecerá. Talvez eu mostre passo a passo como ativar a renderização do componente React no servidor.

  1. Configure o back-end para habilitar os recursos do ES6

    Instalar pacotes babel

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

    Existem várias maneiras de configurar o Babel, eu uso a mais próxima package.jsonpara isso.

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

Mais informações sobre pacotes e configurações do babel:https://babeljs.io/docs/en/

  1. Envie o componente React para o cliente

    Para isso, temos que instalar os pacotes react e react-dom no lado do servidor

    npm install react react-dom
    

    Por exemplo, em seu arquivo server,js ou 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. Visualização de renderização no 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 é apenas um exemplo simples de como você pode renderizar o componente React do back-end, se necessário. Este não é um guia para renderização complexa do lado do servidor no aplicativo, o que é mais complicado, mas não é difícil.