Chuyển đổi lại chuỗi React Component thành jsx

Question

Tôi có một câu hỏi, vì đọc tệp javascript từ NodeJS và gửi cho khách hàng và ở đây tôi đặt lại tất cả tệp dưới dạng chuỗi (điều đó là hiển nhiên) và đây là câu hỏi của tôi. Có giải pháp nào để chuyển đổi lại thành phần chuỗi thành jsx không? Đây không chỉ là thẻ html nên dangerouslySetInnerHTMLhoặc các phương pháp tương tự không hoạt động.

Các thành phần chuỗi của tôi trông giống như thành phần React điển hình, tương tự như vậy:

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;

Vì vậy, đây là chuỗi mà tôi đang đấu tranh với cách chuyển đổi nó thành jsx (có thể điều này là không thể) và tôi nên sử dụng Server Side Rendering với phương thức React như thế ReactDOMServernào?

Answer 1

Hãy thử thư viện này https://www.npmjs.com/package/react-html-parser.

Một tiện ích để chuyển đổi các chuỗi HTML thành các thành phần React. Tránh sử dụng một cách nguy hiểmSetInnerHTML và chuyển đổi các phần tử HTML chuẩn, các thuộc tính và kiểu nội tuyến thành các phần tử React tương đương của chúng.

Answer 2

Bạn có thể chỉ sử dụng JavaScript cũ đơn thuần để thực hiện thủ thuật.

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

Một lựa chọn khác với react.js là sử dụng dangerouslySetInnerHTML.

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

Hoặc Bạn có thể sử dụng html-react-parser.

import Parser from 'html-react-parser';

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

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

Answer 3

Vì vậy, giải pháp cho vấn đề của tôi rất phổ biến và đơn giản (trong giai đoạn đầu của dự án), để hiểu vấn đề và khắc phục nó, chúng ta cần quay lại phần máy chủ của ứng dụng. Đối với Reactcác ứng dụng nếu chúng ta muốn kết xuất tệp jsx từ máy chủ, chúng ta phải sử dụng kết xuất phía máy chủ và vấn đề trên sẽ không còn nữa. Có lẽ tôi chỉ từng bước cách kích hoạt thành phần React hiển thị trong máy chủ te.

1. Định cấu hình phần phụ trợ để bật các tính năng của ES6

   Cài đặt gói babel

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

   Có nhiều cách để cấu hình Babel, tôi sử dụng cách gần nhất package.jsoncho việc này.

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

Thông tin thêm về các gói và cấu hình babel: https://babeljs.io/docs/en/

1. Gửi thành phần React cho máy khách

   Đối với điều này, chúng tôi phải cài đặt các gói phản ứng và phản ứng-dom ở phía máy chủ

   npm install react react-dom
   

   Ví dụ trong tệp máy chủ, js hoặc route.js của bạn:

    ....  //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. Hiển thị chế độ xem trong máy khách

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

Đây chỉ là một ví dụ đơn giản về cách bạn có thể kết xuất thành phần React từ phần phụ trợ nếu đây là lỗi cần thiết. Đây không phải là hướng dẫn cho việc hiển thị phía máy chủ phức tạp trong ứng dụng mà là một thứ phức tạp hơn, nhưng không có gì khó khăn.