React JS中如何在文件路径中传入变量？

问题场景 #

你目前用静态导入加载PDF文件：

import pdf from '../Files/file-1.pdf'

但需要将文件名设为变量（因用户不同而变化），尝试用模板字符串的静态导入方式不可行：

const filename = "file-1.pdf"
import pdf from `../File/${filename}` // 此方法无效

可行解决方案 #

1. 使用ES动态导入（import()函数）

ES模块支持运行时的动态导入，这是最通用的方案。动态导入返回Promise，需结合async/await或.then()处理：

// 放在async函数中执行
async function loadUserPDF(filename) {
  const pdfModule = await import(`../Files/${filename}`);
  const pdf = pdfModule.default; // 取默认导出的PDF资源
  // 后续使用pdf资源
}

// 调用示例
loadUserPDF("user-234.pdf");

注意：动态导入的路径需要符合打包工具的解析规则，避免路径错误。

2. 基于打包工具的预加载（如Webpack的require.context）

如果你的项目用Webpack等打包工具，且所有可能的PDF文件都在指定目录下，可以用require.context预加载所有PDF，再通过变量匹配：

// 预加载../Files目录下所有.pdf文件（不递归子目录）
const pdfContext = require.context('../Files/', false, /\.pdf$/);

// 根据变量获取对应PDF
const filename = "user-567.pdf";
const pdf = pdfContext(`./${filename}`);

这种方法的优势是打包时会把所有匹配的PDF都纳入构建，运行时可以直接通过变量获取，无需异步等待。

为什么静态导入不能用变量？ #

ES静态导入是编译阶段解析的，编译器需要提前确定所有导入路径，无法在运行时动态替换变量，因此模板字符串形式的静态导入不被支持。

内容的提问来源于stack exchange，提问作者Tarek Gharbi