我有一个React应用程序，当按钮被按下时，它会有条件地打开一个模态。我希望有一种方法来访问这些模态，即使它们还没有被渲染，这样我就可以使用html2canvas一次性地将模态保存为图像。我可以在打开模态后单独地将它们保存为图像，但我希望通过一次性保存不同模态的所有图像来使这个过程更高效。当我无法访问不同的模态元素ID（因为它们还没有被呈现）时，我该怎么做呢？
这是当前的代码，我必须分别保存不同模态的图像后，我已经打开他们：

if (elementId) {
    console.log(elementId);
    const screenshotTarget = document.getElementById(elementId);
    console.log(screenshotTarget);
    html2canvas(screenshotTarget, { scale: 0.9 }).then((canvas) => {
      canvas.getContext("2d", {
        willReadFrequently: true,
      });
      const base64image = canvas.toDataURL("image/jpeg");
      download(base64image, elementId + ".jpeg", "image/jpeg");
    });
  }

我考虑过在创建时加载所有不同的模态，然后将display属性设置为none，但我不知道一次渲染所有模态并隐藏它们是否效率低下。还有比这更好的选择吗？