फिर से jsx के लिए स्ट्रिंग प्रतिक्रिया घटक बदलें

Aug 17 2020

मेरे पास एक प्रश्न है, क्योंकि NodeJS से जावास्क्रिप्ट फ़ाइल पढ़ें और क्लाइंट को भेजें और यहां मैं सभी फाइल को स्ट्रिंग (जो स्पष्ट है) के रूप में फिर से दे रहा हूं और यहां मेरा सवाल है। क्या स्ट्रिंग घटक को फिर से जेएसएक्स में बदलने का कोई समाधान है? यह केवल html टैग नहीं है इसलिए dangerouslySetInnerHTMLया इसी तरह के तरीके काम नहीं करते हैं।

मेरे स्ट्रिंग घटक विशिष्ट प्रतिक्रिया घटक की तरह दिखते हैं, कुछ इस तरह:

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 में कैसे परिवर्तित करें (शायद यह असंभव है) और मुझे रिएक्ट मेथड जैसे सर्वर साइड रेंडरिंग का उपयोग करना चाहिए ReactDOMServer?

जवाब

brijesh-pant Aug 17 2020 at 13:52

इस लाइब्रेरी को आज़माएं https://www.npmjs.com/package/react-html-parser

प्रतिक्रियाशील घटकों में HTML स्ट्रिंग्स को परिवर्तित करने के लिए एक उपयोगिता। खतरनाक तरीके से उपयोग करने से बचा जाता है InnerHTML और मानक HTML तत्वों, विशेषताओं और इनलाइन शैलियों को उनके रिएक्ट समकक्ष में रूपांतरित करता है।

AravindaMeewalaarachchi Aug 17 2020 at 13:54

आप चाल करने के लिए सिर्फ सादे पुराने जावास्क्रिप्ट का उपयोग कर सकते हैं।

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 फ़ाइल प्रस्तुत करना चाहते हैं, हम उपयोग सर्वर साइड प्रतिपादन करने के लिए और इसके बाद के संस्करण समस्या चला जाएगा है। हो सकता है कि मैं कदम से कदम दिखाऊं कि कैसे ते सर्वर में रिएक्ट घटक प्रदान करना सक्षम करें।

  1. ES6 सुविधाओं को सक्षम करने के लिए बैकएंड को कॉन्फ़िगर करें

    बैबल पैकेज स्थापित करें

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

    बैबिल को कॉन्फ़िगर करने के कई तरीके हैं, मैं इसके लिए निकटतम का उपयोग करता हूं package.json

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

बेबल पैकेज और कॉन्फ़िगरेशन के बारे में अधिक जानकारी: https://babeljs.io/docs/en/

  1. क्लाइंट को रिएक्ट कंपोनेंट भेजें

    इसके लिए हमें सर्वर साइड में रिएक्शन और रिएक्शन-डोम पैकेज इंस्टॉल करने होंगे

    npm install react react-dom
    

    आपके सर्वर, js या path.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>
    )
    

यह केवल सरल उदाहरण है कि आप बैकएंड से रिएक्ट घटक को कैसे प्रस्तुत कर सकते हैं यदि यह नेकसेरी है। यह एप्लिकेशन में जटिल सर्वर साइड रेंडरिंग के लिए गाइड नहीं है जो कि अधिक जटिल चीज है, लेकिन कोई मुश्किल चीज नहीं है।