Konwertuj ponownie łańcuch React Component na jsx

Question

Mam jedno pytanie, bo czytam plik javascript z NodeJS i wysyłam do klienta i tutaj odzyskuję cały plik jako string (co jest oczywiste) i oto moje pytanie. Czy jest jakieś rozwiązanie, aby ponownie przekonwertować składnik ciągu na jsx? To nie tylko tagi HTML, więc dangerouslySetInnerHTMLlub podobne metody nie działają.

Moje komponenty stringowe wyglądają jak typowy komponent Reacta, coś takiego:

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;

Więc to jest string, z którym zmagam się, jak przekonwertować go na jsx (może to jest niemożliwe) i powinienem użyć Renderowania po stronie serwera z metodami React ReactDOMServer?

Answer 1

Wypróbuj tę bibliotekę https://www.npmjs.com/package/react-html-parser.

Narzędzie do konwersji łańcuchów HTML na komponenty React. Zapobiega używaniu niebezpiecznie niebezpiecznieSetInnerHTML i konwertuje standardowe elementy HTML, atrybuty i style wbudowane na ich odpowiedniki w React.

Answer 2

Możesz użyć zwykłego starego JavaScript, aby załatwić sprawę.

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

Inną opcją zreak.js jest użycie dangerouslySetInnerHTML.

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

Lub możesz użyć html-react-parser.

import Parser from 'html-react-parser';

const renderHelloWorld = <h1>Hello World</h1>

<div>{Parser(renderHelloWorld)}</div>

Answer 3

Tak więc rozwiązanie mojego problemu jest bardzo popularne i proste (we wczesnej fazie projektu), aby zrozumieć problem i go naprawić, musimy wrócić do części aplikacji na serwer. W przypadku Reactaplikacji, jeśli chcemy wyrenderować plik jsx z serwera, musimy użyć renderowania po stronie serwera i powyższy problem zniknie. Może pokażę krok po kroku, jak włączyć renderowanie komponentu React na serwerze.

1. Skonfiguruj zaplecze, aby włączyć funkcje ES6

   Zainstaluj pakiety babel

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

   Istnieje wiele sposobów konfiguracji Babel, używam package.jsondo tego najbliższego .

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

Więcej informacji o pakietach i konfiguracjach babel: https://babeljs.io/docs/en/

1. Wyślij komponent React do klienta

   W tym celu musimy zainstalować po stronie serwera pakiety reaguj i reaguj-dom

   npm install react react-dom
   

   Na przykład w pliku server, js lub 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. Renderuj widok w kliencie

   ...//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>
   )
   

To tylko prosty przykład, jak można renderować komponent React z zaplecza, jeśli jest to konieczne. To nie jest przewodnik po złożonym renderowaniu po stronie serwera w aplikacji, co jest rzeczą bardziej skomplikowaną, ale nie trudną.