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 dangerouslySetInnerHTML
ou 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 React
les 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.json
pour 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.