javascript - 如何在React中做vanilla js等效的appendChild？

Question

我已经写过this普通 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

请指导我以react方式编写上述函数？

这是我当前的 code-sandbox

Answer 1

由于this.state = {visible: false};，您的模态组件无法首次渲染所以.modal-container第一次渲染时不存在。仅在您单击“打开”按钮后才会呈现。

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