如何在React中做与香草js等效的appendChild？

Question

我已经用香草js编写了这支笔。 现在，我想在我的react组件中使用它。

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);
}

当我在react的componentDidMount生命周期内使用上述渲染函数时，出现Cannot read property 'appendChild' of null的错误

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

这是我当前的代码沙盒

Answer 1

由于this.state = {visible: false};您的Modal组件第一次无法呈现this.state = {visible: false}; 因此.modal-container最初不存在。 仅在单击“打开”按钮后才会呈现它。

为了避免这种情况，您可以将pdf创建逻辑移到单独的组件中，并将该组件呈现在<Modal> 。 这是一个例子