Converti di nuovo la stringa React Component in jsx
Ho una domanda, perché leggi il file javascript da NodeJS e invialo al client e qui ricevo tutti i file come stringa (il che è ovvio) ed ecco la mia domanda. C'è qualche soluzione per convertire nuovamente il componente stringa in jsx? Questo non è solo tag html così dangerouslySetInnerHTML
o metodi simili non funzionano.
I componenti della mia stringa assomigliano al tipico componente React, qualcosa del genere:
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;
Quindi questa è una stringa che sto lottando con come convertirla in jsx (forse questo è impossibile) e dovrei usare Server Side Rendering con React methodfs come ReactDOMServer
?
Risposte
Prova questa libreria https://www.npmjs.com/package/react-html-parser
.
Un'utilità per convertire stringhe HTML in componenti React. Evita l'uso di pericolosamenteSetInnerHTML e converte elementi, attributi e stili incorporati HTML standard nei loro equivalenti React.
Puoi usare semplicemente il vecchio JavaScript per fare il trucco.
document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;
Un'altra opzione con react.js è l'uso di dangerouslySetInnerHTML
.
<div dangerouslySetInnerHTML={{ __html: renderHelloWorld }} />
Oppure puoi usare html-react-parser
.
import Parser from 'html-react-parser';
const renderHelloWorld = <h1>Hello World</h1>
<div>{Parser(renderHelloWorld)}</div>
Quindi, la soluzione per il mio problema è molto popolare e semplice (nella fase iniziale del progetto), per capire il problema e risolverlo dobbiamo tornare alla parte server dell'app. Per React
le applicazioni se vogliamo eseguire il rendering del file jsx dal server, dobbiamo utilizzare il rendering lato server e il problema precedente scomparirà. Forse mostro passo dopo passo come abilitare il rendering del componente React nel server.
Configura il backend per abilitare le funzionalità di ES6
Installa i pacchetti babel
npm install @babel/core @babel/node @babel/preset-env @babel/preset-react --save-dev
Ci sono molti modi per configurare Babel, io uso il più vicino
package.json
per questo.{ ......, /*This have to be in the top level in package.json*/ "babel":{ "presets":[ "@babel/preset-env", "@babel/preset-react" ] } }
Maggiori informazioni sui pacchetti e sulle configurazioni babel:https://babeljs.io/docs/en/
Invia il componente React al client
Per questo dobbiamo installare i pacchetti react e react-dom lato server
npm install react react-dom
Ad esempio nel file server, js o 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/>)) })
Vista di rendering nel client
...//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> )
Questo è solo un semplice esempio di come è possibile eseguire il rendering del componente React dal back-end se questo è necasarry. Questa non è una guida per il rendering lato server complesso nell'applicazione che è una cosa più complicata, ma nessuna cosa difficile.