Question

我试图连接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 =＆＃34; ../../../ data / statements /＆＃34 ;;

<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>

我认为问题在于我是如何构建完整路径字符串的，所以我甚至尝试添加＆＃34; full_path＆＃34;到数据对象，它仍然无法正常工作（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中打开文件时，它表示＆＃34; Adobe Reader无法打开＆＃39; deed_20170303.pdf＆＃39;因为它不是受支持的文件类型，或者因为文件已损坏而且＃34;

我们非常感谢所有帮助，以了解如何在map方法中动态构建href。谢谢。

Answer 1

@ john-ruddell - 感谢您之前的帖子。我尝试了内联要求，但这并没有奏效。你对console.log（契约）的提示帮助我指明了正确的方向。

在我的webpack.config.js中，我有以下内容：

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

这就是console.log（deed）打印的方式 - ＆gt; ＆＃34; /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越来越熟悉，我希望找到一种更好的解决方法。谢谢！

使用map（）方法

1 个答案: