web-dev-qa-db-ja.com

Reactでの外部HTML / Reactコンポーネントの動的なレンダリング

HTML/JSXコンテンツを外部ソースから取得して、Reactで動的にレンダリングすることは可能ですか？この例では、Wordpress APIからコンテンツを取得して、クライアントとサーバーの両方でレンダリングします（NextJSを使用しています）。

したがって、Wordpress APIは、HTML/JSXの文字列であるコンテンツプロパティを含むJSON応答を返します。コンテンツは次のようになります。

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

ご覧のとおり、HTMLとReact components/JSXの組み合わせで、文字列として表されます。

私はAxiosを使用してコンテンツを取得するための呼び出しを行い（サーバーとクライアントの両方でNextJSのgetInitialProps（）メソッドを使用）、それをレンダリングする必要がありますが、反応するのが初めてで、いくつかの問題を確認できます。

1）Reactでは、JSXは実行時ではなくビルド時にコンパイルされます。これを回避する方法がわかりません（たとえば、Angular $ compileサービスを使用すると簡単です）。 。

2）Wordpressからのコンテンツが使用するコンポーネントがわからないため、ページの上部にあるすべてのコンポーネントをインポートする必要があります。コンテンツにはコンポーネントまたはコンポーネントが含まれている場合があります。

現在、これは不可能だと私は考えています。つまり、Reactを使用して再検討する必要があることを意味しますが、誰かが答えを期待しています。

どんな助けでも本当にいただければ幸いです。

javascriptreactjsnext.jswp-api
12
jonhobbs

興味深い問題！

react-jsx-parser を試してみてください。それはあなたの問題を解決すると思います。 Next JSでどのように機能するかわからない-Next JSの経験はありません。

このサンドボックスをチェックしてください： Edit 24r1ypp00p

すべてのコンポーネントがバンドルされるのはあなたの言うとおりです。そのための回避策があります。 :)

このサンドボックスをチェックしてください： Edit 24r1ypp00p

インポートのプロミスを期待してコンポーネントを返すdynamicComponentを作成しました。

A、B、Cコンポーネントのインポート方法をindex.jsに変更しました。このようにして、各動的にインポートされたコンポーネントは個別のバンドルを取得し、必要な場合にのみ要求されます。

これで2番目の問題が解決されます。

6
bamse

以下のリンクを参照してください

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

React Componentsパーツの場合、静的HTMLマークアップ文字列を使用してレンダリングできます

https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

ただし、取得するHTMLが本物のソースからのものであり、悪意のあるスクリプトが含まれていないことを確認してください

0
Gokul