时间戳

首页 > 解决方案 > 使用 require React 导入动态文件

javascript - 使用 require React 导入动态文件

问题描述

您好，我正在使用 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>

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

标签： javascriptreactjs

解决方案

这是与您正在使用的模块捆绑器有关的问题。为了让它工作，该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>

推荐阅读