reactjs - DOM にマウントせずに React コンポーネントのスクリーンショットを撮るにはどうすればよいですか?

Question

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

私の論理はこれです：

import React from "react";
import ReactDOMServer from "react-dom/server";
import html2canvas from "html2canvas";
import MyComp from "./component.jsx";

export const createScrenshot = () => {
  const el = (
    <div>
      test component <MyComp />
    </div>
  );

  const markup = ReactDOMServer.renderToString(el);
  let doc = new DOMParser().parseFromString(markup, "text/html");
  let target = doc.body.getElementsByClassName("my-comp")[0];

  console.log(markup, target);

  html2canvas(target, {
    useCORS: true,
    allowTaint: true,
    scale: 1,
    width: 500,
    height: 500,
    x: 0,
    y: 0,
    logging: true,
    windowWidth: 500,
    windowHeight: 500
  })
    .then(function(canvas) {
      console.log(">> ", canvas);
    })
    .catch(error => {
      console.log(error);
    });
};

そのため、コンポーネントを 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コンポーネントのスクリーンショットを撮る他の方法はありますか?

前もって感謝します！！