Converti di nuovo la stringa React Component in jsx

Aug 17 2020

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ì dangerouslySetInnerHTMLo 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

brijesh-pant Aug 17 2020 at 13:52

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.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

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>
Mat.Now Aug 18 2020 at 14:12

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 Reactle 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.

  1. 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.jsonper 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/

  1. 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/>))
    })
    
  2. 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.