Converta string React Component para jsx novamente
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 dangerouslySetInnerHTML
mé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
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.
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>
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 React
aplicativos, 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.
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.json
para 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/
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/>)) })
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.