如何从 DOM 访问条件渲染的元素，这些元素尚未在 React 中渲染？答案

【问题标题】：How can I access conditionally rendered elements from the DOM which have not been rendered yet in React?如何从 DOM 访问条件渲染的元素，这些元素尚未在 React 中渲染？
【发布时间】：2022-12-10 06:00:57
【问题描述】：

我有一个 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");
    });
  }

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

【问题讨论】：

你为什么不使用参考？
如果该元素不在 DOM 中（已呈现），那么它当然不可访问，因此呈现它并使用 display:none 是我看到的唯一选项。
@Konrad 我以前对 useRefs 没有太多经验。我是否仍然可以将 useRef 用于尚未渲染的组件？

标签： reactjs dom conditional-statements rendering getelementbyid

【解决方案1】：

我基本上只是通过重新渲染我想在按下按钮时访问的组件来解决这个问题。我没有找到其他方法来访问有条件地呈现的组件，所以这是我能找到的唯一可行的解决方案

【讨论】：