Convertir à nouveau la chaîne React Component en jsx
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
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.
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>
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.
- 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/
- 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/>)) })
- 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.