使用require React导入动态文件

Question

你好，我正在导入一个带有require的动态文件，但是我的文件不在/src之外，所以我检查了一个帖子，说我是否在./node_modules/react-scripts/config/webpack-config.js中注释了两行

我可以访问/src以外的文件，问题是，如果这样做可以正常工作：

   <a href={require('../../../../../files/asd.pdf')} target="_blank" rel="noopener noreferrer" className="dropdown-item text-center">Show PDF</a>

但是如果我想通过道具动态接收路径，则会收到此错误：

Error: Cannot find module '../../../../../files/asd.pdf'

我的代码是this，而this.state.fullPath与以前相同。

  <a href={require(this.state.fullPath)} target="_blank" rel="noopener noreferrer" className="dropdown-item text-center">Show PDF</a>

我尝试串联一个空字符串，但仍然无法正常工作

Answer 1

这是与您正在使用的模块捆绑器有关的问题。为了使其工作，require函数必须获取一个路径，捆绑程序将使用该路径在构建时而非运行时导入模块。您将需要使用require使用完整路径而不是变量。

您可以尝试以下操作：

const one = require('./path/to/one.pdf'); 
const two = require('./path/to/two.pdf'); 

const href = variable === 1 ? one : two;

<a href={href} target="_blank" rel="noopener noreferrer" className="dropdown-item text-center">Show PDF</a>