文字列Reactコンポーネントをjsxに再度変換します
NodeJSからjavascriptファイルを読み取ってクライアントに送信し、ここですべてのファイルを文字列として取得するため(これは明らかです)、質問が1つあります。文字列コンポーネントを再び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に変換する方法に苦労している文字列です(おそらくこれは不可能です)そして私は次のようなReactメソッドでサーバーサイドレンダリングを使用する必要がありますReactDOMServer
か?
回答
このライブラリを試してくださいhttps://www.npmjs.com/package/react-html-parser
。
HTML文字列をReactコンポーネントに変換するためのユーティリティ。危険なSetInnerHTMLの使用を回避し、標準のHTML要素、属性、およびインラインスタイルを同等のReactに変換します。
昔ながらのJavaScriptだけを使ってトリックを行うことができます。
document.querySelector('#elementToBeReplace').innerHTML = renderHelloWorld;
react.jsのもう1つのオプションは、の使用です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およびreact-domパッケージをインストールする必要があります
npm install react react-dom
たとえば、server、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コンポーネントをレンダリングする方法の簡単な例にすぎません。これは、アプリケーションでの複雑なサーバー側レンダリングのガイドではありません。これは、より複雑なことですが、難しいことではありません。