String React Bileşenini tekrar jsx'e dönüştürün

Aug 17 2020

Bir sorum var, çünkü NodeJS'den javascript dosyasını okuyup istemciye gönderiyorum ve burada tüm dosyayı string olarak alıyorum (ki bu açık) ve işte benim sorum. String bileşenini tekrar jsx'e dönüştürmek için herhangi bir çözüm var mı? Bu yalnızca html etiketleri değildir, bu nedenle dangerouslySetInnerHTMLveya benzer yöntemler çalışmaz.

String bileşenlerim tipik React bileşenine benziyor, şuna benzer:

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;

Yani bu string'i jsx'e nasıl dönüştürdüğümle uğraşıyorum (belki bu imkansızdır) ve Server Side Rendering'i React methodfs gibi kullanmalıyım ReactDOMServer?

Yanıtlar

brijesh-pant Aug 17 2020 at 13:52

Bu kitaplığı deneyin https://www.npmjs.com/package/react-html-parser.

HTML dizelerini React bileşenlerine dönüştürmek için bir yardımcı program. DangerouslySetInnerHTML kullanımından kaçınır ve standart HTML öğelerini, nitelikleri ve satır içi stilleri React eşdeğerlerine dönüştürür.

AravindaMeewalaarachchi Aug 17 2020 at 13:54

Hile yapmak için eski sade JavaScript kullanabilirsiniz.

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

React.js ile başka bir Seçenek kullanımıdır dangerouslySetInnerHTML.

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

Veya kullanabilirsiniz 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

Bu nedenle, sorunumun çözümü çok popüler ve basittir (erken proje aşamasında), sorunu anlamak ve düzeltmek için uygulamanın sunucu kısmına geri dönmemiz gerekiyor. İçin Reactbiz sunucudan JSX dosyayı işlemek isterseniz uygulamalar, biz kullanım sunucu tarafı oluşturmaya geri ve problem gitmiş olacak yukarıda var. Belki adım adım React bileşenini te sunucusunda işlemenin nasıl etkinleştirildiğini gösteririm.

  1. ES6 özelliklerini etkinleştirmek için arka ucu yapılandırın

    Babel paketlerini yükleyin

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

    Babel'i yapılandırmanın birçok yolu var, bunun için en yakınını kullanıyorum package.json.

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

Babel paketleri ve konfigürasyonları hakkında daha fazla bilgi: https://babeljs.io/docs/en/

  1. React bileşenini istemciye gönderin

    Bunun için sunucu tarafında react ve react-dom paketlerini kurmamız gerekiyor.

    npm install react react-dom
    

    Örneğin sunucunuzda, js veya route.js dosyanızda:

     ....  //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. İstemcide görünümü işle

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

Bu, eğer bu başarısızlık ise, React bileşenini arka uçtan nasıl oluşturabileceğinizin basit bir örneğidir. Bu, uygulamada karmaşık sunucu tarafı oluşturma için bir rehber değildir, bu daha karmaşık bir şeydir, ancak zor bir şey değildir.