Ubah string React Component menjadi jsx lagi
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 dangerouslySetInnerHTML
atau 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
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.
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>
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 React
aplikasi 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.
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.json
untuk 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/
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/>)) })
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.