React - 动态导入pdf文件的路径

【问题标题】：React - Import dynamically path to pdf fileReact - 动态导入pdf文件的路径
【发布时间】：2021-03-05 22:54:17
【问题描述】：

首先，我的页面会向 API 发出一个 http 请求

API 然后响应具有path: ./assets/sample.pdf 的对象

我想从import urlPdf from response.path得到urlPdf

我该怎么做？

【问题讨论】：

标签： reactjs import require

【解决方案1】：

我会尝试https://www.npmjs.com/package/react-pdf

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

const App = () => {
  const [pageNumber, setPageNumber] = useState();
  const [numPages, setNumPages] = useState();
  const [urlPdf, setUrlPdf] = useState();

  const _onDocumentLoadSuccess = ({ numPages }) => setNumPages(numPages);
  
  const fetchPdfPath = ({
    // logic handle get path...
    // setUrlPdf(response.data);
  })
  
  return (
    <div>
      {urlPdf && (
        <Document
          file={urlPdf}
          onLoadSuccess={_onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      )}
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

【讨论】：

谢谢。我找到了答案

【解决方案2】：

哦，超级简单。就const result = require(response.path)

【讨论】：

由于file-loader已经从v1升级到v6，现在应该是require(response.path).default;