我正在尝试连接2个字符串以创建href文件URL。字符串值之一来自我的DataDocuments对象数组(在documents.json文件中)。

documents.json文件:

[
{ "year":"2017", "ref": "20170303", "file_name": "deed_20170303.pdf", "full_path": "../../../data/statements/deed_20170303.pdf" },
{ "year":"2016", "ref": "201604", "file_name": "deed_20160413.pdf", "full_path": "../../../data/statements/deed_20160413.pdf" }
]


我在尝试建立href(ATTEMPT#1-FAILED)的代码中包含以下内容:

const statementPath =“ ../../../ data / statements /”;

<Table>
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}>
<td><a href={statementPath.concat(item.file_name)} download>{item.file_name}</a></td>
</tr>
))}
</Table>


当我只是在内部依赖关系下定义了完整的字符串(ATTEMPT#2-WORKS)时,以下代码即可工作:

import deed from "../../../data/statements/deed_20170303.pdf";

<Table>
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}>
<td><a href={deed} download>{item.file_name}</a></td>
</tr>
))}
</Table>


我以为问题是我如何构建完整路径字符串,所以我什至尝试向数据对象添加“ full_path”,但仍然无法正常工作(ATTEMPT#3-FAILED):

<Table>
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}>
<td><a href={item.full_path} download>{item.file_name}</a></td>
</tr>
))}
</Table>


对于ATTEMPT#1和ATTEMPT#3,我可以进行下载,但是当我在Adobe Reader中打开文件时,它说“ Adob​​e Reader无法打开'deed_20170303.pdf',因为它不是受支持的文件类型,或者因为文件已损坏”

感谢您提供所有帮助,以了解如何在map方法中动态构建href。提前致谢。

最佳答案

@ john-ruddell-感谢您的早期帖子。我尝试了内联要求,但这没有用。您对console.log(deed)的提示帮助我指出了正确的方向。

在我的webpack.config.js中,我具有以下内容:

        {
            test: /\.(pdf|png|jpg|woff|woff2|ttf|eot|svg)$/,
            use: ["file-loader?name=images/[name].[ext]"]
        }


这就是console.log(deed)打印的方式->“ /js/images/Statement_20170303.pdf”

我将webpack.config.js修改为:

  {
    test: /\.(pdf|png|jpg|woff|woff2|ttf|eot|svg)$/,
    use: ["file-loader?name=[path][name].[ext]"]
  },


并将我的代码更改为:

<a href={"/js/data/statements/".concat(item.file_name)} download>


就目前而言,由于我仍在学习React,所以它可以工作。随着我对Webpack和React的越来越熟悉,我希望找到一种更好的方法来解决此问题。谢谢!

10-05 20:48
查看更多