문자열 React Component를 jsx로 다시 변환

Question

NodeJS에서 자바 스크립트 파일을 읽고 클라이언트에 보내고 여기에 모든 파일을 문자열 (분명한)로 받아들이고 여기에 내 질문이 있습니다. 문자열 구성 요소를 다시 jsx로 변환하는 솔루션이 있습니까? 이것은 단지 html 태그가 아니므로 dangerouslySetInnerHTML유사한 방법이 작동하지 않습니다.

내 문자열 구성 요소는 일반적인 React 구성 요소처럼 보입니다.

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;

그래서 이것은 jsx로 변환하는 방법에 어려움을 겪고있는 문자열입니다 (아마도 불가능합니다) .React methodfs와 함께 Server Side Rendering을 사용해야 ReactDOMServer합니까?

Answer 1

이 라이브러리를 사용해보십시오 https://www.npmjs.com/package/react-html-parser.

HTML 문자열을 React 컴포넌트로 변환하는 유틸리티입니다. dangerouslySetInnerHTML의 사용을 피하고 표준 HTML 요소, 속성 및 인라인 스타일을 React 등가물로 변환합니다.

Answer 2

평범한 오래된 JavaScript를 사용하여 트릭을 수행 할 수 있습니다.

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

react.js의 또 다른 옵션은 dangerouslySetInnerHTML.

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

또는 html-react-parser.

import Parser from 'html-react-parser';

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

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

Answer 3

따라서 내 문제에 대한 해결책은 매우 인기 있고 간단합니다 (초기 프로젝트 단계에서). 문제를 이해하고 해결하려면 앱의 서버 부분으로 돌아 가야합니다. 들어 React우리가 서버에서 jsx 파일을 렌더링하려면 응용 프로그램, 우리가 사용하는 서버 측 렌더링과 문제가 사라질 것 위에 있습니다. 서버에서 React 컴포넌트 렌더링을 활성화하는 방법을 단계별로 보여줄 수 있습니다.

1. ES6 기능을 사용하도록 백엔드 구성

   바벨 패키지 설치

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

   Babel을 구성하는 방법에는 여러 가지가 있습니다 package.json. 가장 가까운 방법을 사용합니다 .

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

바벨 패키지 및 구성에 대한 추가 정보 : https://babeljs.io/docs/en/

1. 클라이언트에 React 컴포넌트 보내기

   이를 위해 서버 측에 react 및 react-dom 패키지를 설치해야합니다.

   npm install react react-dom
   

   예를 들어 server, js 또는 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. 클라이언트에서보기 렌더링

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

이것이 necasarry 인 경우 백엔드에서 React 컴포넌트를 렌더링 할 수있는 간단한 예제입니다. 이것은 응용 프로그램에서 복잡한 서버 측 렌더링을위한 가이드가 아니지만 더 복잡한 것은 아니지만 어려운 것은 아닙니다.