如何從 DOM 訪問條件渲染的元素，這些元素尚未在 React 中渲染？

Question

我有一個 React 應用程序，它在按下按鈕時有條件地打開模式。 我想要一種方法來訪問這些模態，即使它們還沒有被渲染，這樣我就可以使用 html2canvas 將模態保存為一個 go 中的圖像。 打開模態后，我可以將它們單獨保存為圖像，但我想通過將不同模態的所有圖像保存在一個 go 中來提高處理效率。當我無法訪問不同模態時，我該怎么做模態元素 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");
    });
  }

我考慮過讓所有不同的模式在創建時加載，然后將顯示屬性設置為無，但我不知道一次渲染所有模式並隱藏它們是否效率低下。 還有比這更好的選擇嗎？

Answer 1

我基本上只是通過重新渲染我想在按下按鈕時訪問的組件來解決這個問題。 我沒有找到其他方法來訪問有條件地呈現的組件，所以這是我能找到的唯一可行的解決方案