Question

我需要将一些文件（在这种情况下为PDF，以及稍后的SVG）导入<embed>元素。我正在迭代一个道具列表，向我发送PDF的路径。当在组件的头部导入时，注入的一切都按预期正常工作。但是，我需要动态设置这些路径，我知道我无法导入内部渲染。使用路径本身不会给我带来任何结果。

不起作用：

// pdf.src = './path/to/file.pdf'
{project.projectPDFs.map((pdf, index) =>
    <embed className="pdf-viewer" src={pdf.src} width="100%" key={index} />
    )
}

使用：

import PDF from './path/to/file.pdf';
{project.projectPDFs.map((pdf, index) =>
    <embed className="pdf-viewer" src={PDF} width="100%" key={index} />
    )
}

应用程序是使用create-react-app引导的，它具有url-loader，但不确定引擎盖下还有什么。

Answer 1

create-react-app正在使用Webpack来构建您的应用。因此，文件的URL将在构建后更改。

import PDF from './path/to/file.pdf'; 将您的文件路径更改为另一个哈希字符串并存储到PDF。所以你不会有第二种错误。

在您的情况下，您有两种方法：

首先导入所有资源

import PDF1 from '/path/to/PDF1';
import PDF2 from '/path/to/PDF2';
import PDF3 from '/path/to/PDF3';
import PDF4 from '/path/to/PDF4';
const pdfs = {PDF1, PDF2, PDF3, PDF4};
...
{project.projectPDFs.map((pdf, index) => (
    <embed className="pdf-viewer" src={pdfs[pdf]} width="100%" key={index} />
)}

动态导入

const embeds = await Promise.all(project.projectPDFs.map(async (pdf, index) => {
    const pdfPath = await import(pdf);
    return (<embed className="pdf-viewer" src={pdfPath} width="100%" key={index} />);
}));

ReactJS，在render（）中导入文件

1 个答案: