Convertir à nouveau la chaîne React Component en jsx

Aug 17 2020

J'ai une question, car lire le fichier javascript de NodeJS et l'envoyer au client et ici je reçois tous les fichiers sous forme de chaîne (ce qui est évident) et voici ma question. Existe-t-il une solution pour reconvertir le composant de chaîne en jsx? Il ne s'agit pas seulement de balises html, donc dangerouslySetInnerHTMLou de méthodes similaires ne fonctionnent pas.

Mes composants de chaîne ressemblent à un composant React typique, quelque chose comme ça :

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;

C'est donc une chaîne avec laquelle j'ai du mal à la convertir en jsx (c'est peut-être impossible) et je devrais utiliser le rendu côté serveur avec React methodfs comme ReactDOMServer?

Réponses

brijesh-pant Aug 17 2020 at 13:52

Essayez cette bibliothèque https://www.npmjs.com/package/react-html-parser.

Un utilitaire pour convertir des chaînes HTML en composants React. Évite l'utilisation de dangereusementSetInnerHTML et convertit les éléments HTML standard, les attributs et les styles en ligne en leurs équivalents React.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

Vous pouvez utiliser tout simplement le vieux JavaScript pour faire l'affaire.

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

Une autre option avec react.js est l'utilisation de dangerouslySetInnerHTML.

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

Ou Vous pouvez utiliser 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

Donc, la solution à mon problème est très populaire et simple (au début du projet), pour comprendre le problème et le résoudre, nous devons revenir à la partie serveur de l'application. Pour Reactles applications, si nous voulons rendre le fichier jsx à partir du serveur, nous devons utiliser le rendu côté serveur et le problème ci-dessus aura disparu. Peut-être que je montre étape par étape comment activer le rendu du composant React sur le serveur.

  1. Configurer le backend pour activer les fonctionnalités ES6

    Installer les packages babel

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

    Il existe plusieurs façons de configurer Babel, j'utilise la plus proche package.jsonpour cela.

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

Plus d'informations sur les packages et les configurations babel :https://babeljs.io/docs/en/

  1. Envoyer le composant React au client

    Pour cela, nous devons installer les packages react et react-dom côté serveur

    npm install react react-dom
    

    Par exemple dans votre fichier 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. Vue de rendu dans le 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>
    )
    

Ceci n'est qu'un exemple simple de la façon dont vous pouvez rendre le composant React à partir du backend si cela est nécessaire. Ce n'est pas un guide pour le rendu complexe côté serveur dans l'application, ce qui est plus compliqué, mais pas difficile.