แปลง string React Component เป็น jsx อีกครั้ง

Aug 17 2020

ฉันมีคำถามหนึ่งข้อเนื่องจากอ่านไฟล์ 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?

คำตอบ

brijesh-pant Aug 17 2020 at 13:52

ลองใช้ห้องสมุดhttps://www.npmjs.com/package/react-html-parserนี้

ยูทิลิตี้สำหรับการแปลงสตริง HTML เป็นคอมโพเนนต์ React หลีกเลี่ยงการใช้ SetInnerHTML ที่เป็นอันตรายและแปลงองค์ประกอบ HTML มาตรฐานแอตทริบิวต์และรูปแบบอินไลน์ให้เป็นค่าการตอบสนองที่เทียบเท่า

AravindaMeewalaarachchi Aug 17 2020 at 13:54

คุณสามารถใช้ 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>
Mat.Now Aug 18 2020 at 14:12

ดังนั้นวิธีแก้ปัญหาของฉันจึงเป็นที่นิยมและเรียบง่าย (ในช่วงโครงการเริ่มต้น) เพื่อทำความเข้าใจปัญหาและแก้ไขเราต้องกลับไปที่ส่วนเซิร์ฟเวอร์ของแอป สำหรับReactแอพพลิเคชั่นหากต้องการเรนเดอร์ไฟล์ jsx จากเซิร์ฟเวอร์เราต้องใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ปัญหาข้างต้นจะหมดไป บางทีฉันอาจจะแสดงวิธีเปิดใช้งานการแสดงผลองค์ประกอบ React ในเซิร์ฟเวอร์ทีละขั้น

  1. กำหนดค่าแบ็กเอนด์เพื่อเปิดใช้งานคุณสมบัติ 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/

  1. ส่งองค์ประกอบการตอบสนองไปยังไคลเอนต์

    สำหรับสิ่งนี้เราต้องติดตั้งแพ็กเกจ 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/>))
    })
    
  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>
    )
    

นี่เป็นเพียงตัวอย่างง่ายๆที่คุณสามารถแสดงผลองค์ประกอบ React จากแบ็กเอนด์ได้หากนี่เป็นสิ่งที่จำเป็น นี่ไม่ใช่คำแนะนำสำหรับการแสดงผลฝั่งเซิร์ฟเวอร์ที่ซับซ้อนในแอปพลิเคชันซึ่งเป็นสิ่งที่ซับซ้อนกว่า แต่ไม่ใช่เรื่องยาก