文字列Reactコンポーネントをjsxに再度変換します

Aug 17 2020

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か?

回答

brijesh-pant Aug 17 2020 at 13:52

このライブラリを試してくださいhttps://www.npmjs.com/package/react-html-parser

HTML文字列をReactコンポーネントに変換するためのユーティリティ。危険なSetInnerHTMLの使用を回避し、標準のHTML要素、属性、およびインラインスタイルを同等のReactに変換します。

AravindaMeewalaarachchi Aug 17 2020 at 13:54

昔ながらの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>
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および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/>))
    })
    
  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コンポーネントをレンダリングする方法の簡単な例にすぎません。これは、アプリケーションでの複雑なサーバー側レンダリングのガイドではありません。これは、より複雑なことですが、難しいことではありません。