問題タブ [react-dom-server]

私の React アプリは現在、ReactDOMServer.renderToStaticMarkupHTML メールの生成に使用しています。

私が抱えている問題ReactDOMServer.renderToStaticMarkupは、小さな画像 (12kb 未満) を画像の src URL からインライン画像に変換することです。これにより、望ましくない添付ファイルを含むイメージが作成されます。

ReactDOMServer.renderToStaticMarkup を (12kb) 未満の小さな画像をインライン化しないように構成するにはどうすればよいですか?

私の使用例: Web サイト エディターと、ユーザーが利用できる Web ページのリストがあります。このリストの各ページは、サムネイルで表されます。ユーザーがエディタを使用してページに変更を加えるたびに、それぞれのサイトのサムネイルを更新して変更を反映する必要があります。私がやっている方法は、ThumbnailSandbox コンポーネントをページにマウントし、Redux ストアから小道具を渡し、dom-to-png を使用してスクリーンショットを作成し、それをリストで使用することです。しかし、コンポーネントをページにマウントせずにやりたかったのです。これは、よりクリーンなソリューションであり、発生する他の相互作用の影響を受ける可能性が少ないと思うからです。そこで、達成しようとしていることを説明するためにCodeSanboxを作成しました。

私の論理はこれです：

そのため、コンポーネントを ReactDOM に渡し、最初のステップの文字列を使用して DOM ノードを作成し、そのノードを html2canvas に渡します。しかし、この時点でエラーが発生しますUncaught TypeError: Cannot read property 'pageXOffset' of null。html2canvas に渡された要素の ownerDocument が null であり、devicePixelRation、innerWidth、innerHeight、pageYOffset、および pageXOffset のプロパティがないためです。私が理解しているように、それは node 要素が DOM の一部ではないためです。

さて、私の質問は次のとおりです。

1) html2canvas を使用してこの問題を解決する方法はありますか?

2)コンポーネントをDOMにマウントせずに、ブラウザーでReactコンポーネントのスクリーンショットを撮る他の方法はありますか?

前もって感謝します！！

Vue には省略形またはコロンを使用しない方法がありますか? これは有効な html ではなく、Node.js でのサーバー レンダリング用に React-Dom で実装する際に問題があります。