reactjs - 想要获取 html 组件作为图像，但总是 document.querySelector 返回 null

Question

我是新来的反应。我正在使用 QRcode.react 生成一个 QR 码，我希望将其添加到 @react-pdf/renderer，以便我可以在 pdf 中附加 QR 码。因此，为此，我试图将 HTML 作为图像的 DataURL。

下面是我生成图像 URL 的代码

import React, { Fragment } from "react";

import QRCode from "qrcode.react";

class QRCodeRender extends React.Component {
  componentDidMount() {
    // console.log("im loded");
    const qrCodeCanvas = document.querySelector("target");
    const qrCodeDataUri = qrCodeCanvas.toDataURL("image/jpg", 0.3);
  }

  render() {
    const { cusName, invoice } = this.props;
    console.log("cusName props " + this.props.cusName);
    let data = `Customer : ${cusName} , Invoice : ${invoice}`;
    return (
      <Fragment>
        <div id="target">
          <QRCode level="Q" style={{ width: 60 }} value={data} />
        </div>
      </Fragment>
    );
  }
}

export default QRCodeRender;

问题是我总是进入 document.querySelector Null 所以我无法创建 HTML 的 URL。我做错了吗？

Answer 1

我无法发表评论，但我认为 toDataUrl() 只是<canvas>元素上的函数？

https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

Answer 2

您要选择 ID 为 target 的元素。但是您选择的是标签目标。

你需要解决这个问题

    const qrCodeCanvas = document.querySelector("target");

=>

    const qrCodeCanvas = document.querySelector("#target");