时间戳

首页 > 解决方案 > reactjs - 在 render() 方法中导入动态文件

reactjs - reactjs - 在 render() 方法中导入动态文件

问题描述

我有一个关于在reactjs. 我已经知道，我可以像这样导入文件/图像：

import pdfImage from '../images/pdf.svg';

现在我想从道具给出的对象中导入文件。我保存的对象中有相对文件路径，即

documents/1_1_DEU_DE.pdf

问题是，在构建时，文件的路径看起来像上面的 pdf 图像。

/static/media/pdf.3fa92281.svg

所以我正在寻找类似的东西：

render() {
    import pdfFile from '../' + this.props.termsAndCondition.pdfDocument;
    return (
        <li>
            <a href={pdfFile} target="_blank">
                <img src={pdfImage}></img> 
                {this.props.termsAndCondition.language}
            </a>
        </li>
    );
}

当然，我知道，我可以将文件而不是src文件夹放到public文件夹中，但这是推荐的吗？我确信我的问题有解决方案，但我所有的研究都没有得到答案。提前致谢。

标签： reactjs

解决方案

我得到了答案。我可以用来require动态导入文件。

render() {
   let pdfFile = require('../' + this.props.termsAndCondition.pdfDocument);
   return (
      <li>
         <a href={pdfFile} target="_blank" className="link">
            <img src={pdfImage} className="phoneMain"></img> 
            {this.props.termsAndCondition.language}
         </a>
      </li>
   );
}

推荐阅读