Question

我已经用香草js写了this笔。现在我想在反应组件中使用它。

renderPDF(url, canvasContainer, options) {
  options = options || {
    scale: 1
  };

  function renderPage(page) {
    var viewport = page.getViewport(options.scale);
    var wrapper = document.createElement("div");
    wrapper.className = "canvas-wrapper";
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    wrapper.appendChild(canvas);
    canvasContainer.appendChild(wrapper);

    page.render(renderContext);
  }

  function renderPages(pdfDoc) {
    for (var num = 1; num <= pdfDoc.numPages; num++)
      pdfDoc.getPage(num).then(renderPage);
  }
  PDFJS.disableWorker = true;
  PDFJS.getDocument(url).then(renderPages);
}

当我在componentDidMount生命周期内使用上面的render函数时，我得到的错误为Cannot read property 'appendChild' of null

请指导我以反应方式编写上述功能？

这是我目前的code-sandbox

Answer 1

由于this.state = {visible: false};，您的模态组件首次未呈现，因此首次渲染时不存在.modal-container。只有在您点击“打开”按钮后才能呈现它。

为避免这种情况，您可以将pdf创建逻辑移动到单独的组件中，并在<Modal>内呈现此组件。这是example

如何在React中使用vanilla js等效的appendChild？

1 个答案: