javascript - 使用 map() 方法动态 react 构建 href 文件 URL

Question

我正在尝试连接 2 个字符串以创建 href 文件 URL。其中一个字符串值来 self 的 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(尝试 #1 - 失败)时，我的代码中包含以下内容:

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”添加到数据对象，但它仍然不起作用(尝试 #3 - 失败):

<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，我可以下载，但是当我在 Adob​​e Reader 中打开文件时，它显示“Adobe Reader 无法打开‘deed_20170303.pdf’，因为它不是受支持的文件键入或因为文件已损坏”

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

Answer 1

@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越来越熟悉，我希望能找到更好的方法来解决这个问题。谢谢!