String React Bileşenini tekrar jsx'e dönüştürün
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 dangerouslySetInnerHTML
veya 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
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.
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>
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 React
biz 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.
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/
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/>)) })
İ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.