ReactJS，在render（）中导入文件

我需要将一些文件（在本例中是PDF，但在以后也是SVG）导入到

元素中。我正在迭代一个道具列表，这些道具会向我发送PDF的路径。当在组件的头部导入并注入时，一切都按预期进行。但是，我需要动态设置这些路径，我知道我无法在渲染内部导入。使用路径本身不会产生任何结果

不起作用：

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

//pdf.src='./path/to/file.pdf'
{project.projectPDFs.map（（pdf，索引）=>
)
}

作品：

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

importpdf from./path/to/file.PDF'；
{project.projectPDFs.map（（pdf，索引）=>
)
}

应用程序是使用url加载程序启动的，但不确定引擎盖下还发生了什么。

正在使用

网页来构建应用程序。因此，文件的URL将在构建后更改

importpdf 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} />
)}

将PDF1从“/path/to/PDF1”导入；
将PDF2从“/path/to/PDF2”导入；
从“/path/to/PDF3”导入PDF3；
从“/path/to/PDF4”导入PDF4；
常数pdfs={PDF1，PDF2，PDF3，PDF4}；
...
{project.projectPDFs.map（（pdf，索引）=>(
)}

动态导入

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

const embeds=wait Promise.all（project.projectPDFs.map）（异步（pdf，索引）=>{
const pdfPath=等待导入（pdf）；
返回（）；
}));

正在使用
Webpack
构建你的应用程序。因此，构建后，你的文件的URL将更改

从“/path/to/file.PDF”导入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} />
)}

将PDF1从“/path/to/PDF1”导入；
将PDF2从“/path/to/PDF2”导入；
从“/path/to/PDF3”导入PDF3；
从“/path/to/PDF4”导入PDF4；
常数pdfs={PDF1，PDF2，PDF3，PDF4}；
...
{project.projectPDFs.map（（pdf，索引）=>(
)}

动态导入

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

const embeds=wait Promise.all（project.projectPDFs.map）（异步（pdf，索引）=>{
const pdfPath=等待导入（pdf）；
返回（）；
}));

是否尝试将直接路径置于状态？然后可以执行
src={this.state.pdf.src}
是否尝试将直接路径置于状态？然后可以执行
src={this.state.pdf.src}