Ubah string React Component menjadi jsx lagi

Aug 17 2020

Saya punya satu pertanyaan, karena membaca file javascript dari NodeJS dan mengirim ke klien dan di sini saya menampilkan semua file sebagai string (yang jelas) dan inilah pertanyaan saya. Apakah ada solusi untuk mengonversi komponen string lagi ke jsx? Ini bukan hanya tag html sehingga dangerouslySetInnerHTMLatau metode serupa tidak berfungsi.

Komponen string saya terlihat seperti komponen React biasa, seperti itu:

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;

Jadi ini adalah string yang saya perjuangkan dengan bagaimana mengubahnya menjadi jsx (mungkin ini tidak mungkin) dan saya harus menggunakan Server Side Rendering dengan metode React seperti ReactDOMServer?

Jawaban

brijesh-pant Aug 17 2020 at 13:52

Coba perpustakaan ini https://www.npmjs.com/package/react-html-parser.

Sebuah utilitas untuk mengubah string HTML menjadi komponen React. Menghindari penggunaan hazardouslySetInnerHTML dan mengubah elemen HTML standar, atribut, dan gaya sebaris menjadi setara dengan React.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

Anda dapat menggunakan JavaScript lama biasa untuk melakukan trik.

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

Opsi lain dengan react.js adalah penggunaan dangerouslySetInnerHTML.

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

Atau Anda bisa menggunakan html-react-parser.

import Parser from 'html-react-parser';

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

<div>{Parser(renderHelloWorld)}</div>
Mat.Now Aug 18 2020 at 14:12

Jadi, solusi untuk masalah saya sangat populer dan sederhana (dalam tahap proyek awal), untuk memahami masalah dan memperbaikinya kita perlu kembali ke bagian server aplikasi. Untuk Reactaplikasi jika kita ingin merender file jsx dari server, kita harus menggunakan rendering sisi server dan masalah di atas akan hilang. Mungkin saya akan menunjukkan langkah demi langkah bagaimana mengaktifkan rendering komponen React di server te.

  1. Konfigurasi backend untuk mengaktifkan fitur ES6

    Instal paket babel

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

    Ada banyak cara untuk mengkonfigurasi Babel, saya menggunakan yang terdekat package.jsonuntuk ini.

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

Informasi lebih lanjut tentang paket dan konfigurasi babel: https://babeljs.io/docs/en/

  1. Kirim komponen React ke klien

    Untuk ini kita harus menginstal paket react dan react-dom di sisi server

    npm install react react-dom
    

    Misalnya di server Anda, file js atau 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. Render view di klien

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

Ini hanyalah contoh sederhana bagaimana Anda dapat merender komponen React dari backend jika ini necasarry. Ini bukan panduan untuk rendering sisi server yang kompleks dalam aplikasi yang merupakan hal yang lebih rumit, tetapi bukan hal yang sulit.