แปลง string React Component เป็น jsx อีกครั้ง
ฉันมีคำถามหนึ่งข้อเนื่องจากอ่านไฟล์ javascript จาก 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 (อาจเป็นไปไม่ได้) และฉันควรใช้ Server Side Rendering กับ React methodfs เช่นReactDOMServer
?
คำตอบ
ลองใช้ห้องสมุดhttps://www.npmjs.com/package/react-html-parser
นี้
ยูทิลิตี้สำหรับการแปลงสตริง HTML เป็นคอมโพเนนต์ React หลีกเลี่ยงการใช้ SetInnerHTML ที่เป็นอันตรายและแปลงองค์ประกอบ HTML มาตรฐานแอตทริบิวต์และรูปแบบอินไลน์ให้เป็นค่าการตอบสนองที่เทียบเท่า
คุณสามารถใช้ 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>
ดังนั้นวิธีแก้ปัญหาของฉันจึงเป็นที่นิยมและเรียบง่าย (ในช่วงโครงการเริ่มต้น) เพื่อทำความเข้าใจปัญหาและแก้ไขเราต้องกลับไปที่ส่วนเซิร์ฟเวอร์ของแอป สำหรับReact
แอพพลิเคชั่นหากต้องการเรนเดอร์ไฟล์ jsx จากเซิร์ฟเวอร์เราต้องใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ปัญหาข้างต้นจะหมดไป บางทีฉันอาจจะแสดงวิธีเปิดใช้งานการแสดงผลองค์ประกอบ React ในเซิร์ฟเวอร์ทีละขั้น
กำหนดค่าแบ็กเอนด์เพื่อเปิดใช้งานคุณสมบัติ ES6
ติดตั้งแพ็คเกจ babel
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" ] } }
ข้อมูลเพิ่มเติมเกี่ยวกับแพ็คเกจและการกำหนดค่าของ babel: https://babeljs.io/docs/en/
ส่งองค์ประกอบการตอบสนองไปยังไคลเอนต์
สำหรับสิ่งนี้เราต้องติดตั้งแพ็กเกจ react และ react-dom ในฝั่งเซิร์ฟเวอร์
npm install react react-dom
ตัวอย่างเช่นในไฟล์เซิร์ฟเวอร์ 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/>)) })
มุมมองการแสดงผลในไคลเอนต์
...//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> )
นี่เป็นเพียงตัวอย่างง่ายๆที่คุณสามารถแสดงผลองค์ประกอบ React จากแบ็กเอนด์ได้หากนี่เป็นสิ่งที่จำเป็น นี่ไม่ใช่คำแนะนำสำหรับการแสดงผลฝั่งเซิร์ฟเวอร์ที่ซับซ้อนในแอปพลิเคชันซึ่งเป็นสิ่งที่ซับซ้อนกว่า แต่ไม่ใช่เรื่องยาก