如何使 html 到图像适用于所有 div

Question

我正在使用 html-to-image 来捕获 div 的屏幕截图，用户可以将其下载为 .png 文件。

这是我的代码：

export default function App() {
  const contentRef = useRef(null);

  const handleCapture = () => {
    const node = contentRef.current;
    toPng(contentRef.current, { cacheBust: true, height: 410 })
      .then(dataUrl => {
        console.log("Captured image:", dataUrl);
        const link = document.createElement("a");
        link.download = "lineup.png"
        link.href = dataUrl;
        link.click();
      })
      .catch(error => {
        console.error("Error capturing screenshot:", error)
      });
  };

const show1 = () => {
    document.getElementById('div1').style.display = 'block'
    document.getElementById('div2').style.display = 'none'
    document.getElementById('div3').style.display = 'none'
    document.getElementById('div4').style.display = 'none'
  }

  const show2 = () => {
    document.getElementById('div2').style.display = 'block'
    document.getElementById('div1').style.display = 'none'
    document.getElementById('div3').style.display = 'none'
    document.getElementById('div4').style.display = 'none'
  }

  const show3 = () => {
    document.getElementById('div3').style.display = 'block'
    document.getElementById('div1').style.display = 'none'
    document.getElementById('div2').style.display = 'none'
    document.getElementById('div4').style.display = 'none'
  }

  const show4 = () => {
    document.getElementById('div4').style.display = 'block'
    document.getElementById('div3').style.display = 'none'
    document.getElementById('div1').style.display = 'none'
    document.getElementById('div2').style.display = 'none'
  }

return (
    <>    
    <div ref={contentRef} className="col-9" id="div1">
        <SoccerLineUp
            size={"fill"} //responsive
            color={"green"}
            pattern={"lines"}
            homeTeam={homeTeam}
            />
    </div>
    <div ref={contentRef} className="col-9" id="div2">
        <SoccerLineUp
          size={"fill"} //responsive
          color={"green"}
          pattern={"lines"}
          homeTeam={formation}
        />
      </div>
      <div ref={contentRef} className="col-9" id="div3">
        <SoccerLineUp
          size={"fill"} //responsive
          color={"green"}
          pattern={"lines"}
          homeTeam={formation2}
        />
      </div>
      <div ref={contentRef} className="col-9" id="div4">
        <SoccerLineUp
          size={"fill"} //responsive
          color={"green"}
          pattern={"lines"}
          homeTeam={formation3}
        />
      </div>
    </div>
    <button className="downloadButton" onClick={handleCapture}>
      Download
    </button>
    <>
   )

但是，用于捕获 .png 文件的下载按钮适用于 ID 为 div4 的最后一个 div。我试着看看为什么会发生这种情况，发现无论哪个 div 是最后一个 div 都会有下载按钮。所有其他 div 的下载按钮都会返回一个空白的黑色 .png 文件。我需要进行任何修改才能使下载按钮适用于所有 div 吗？

Answer 1

您对多个 div 使用相同的

contentRef

是行不通的，

contentRef

将只是最后一个。显示/隐藏 div 不会对其执行任何操作。还要尽量避免在 React 中直接操作 DOM，这是反模式