使用map（）方法動態地構建href文件URL

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代碼如下（未遂＃1 - 失敗）：

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

下面的代碼不工作WHN我只是有在我的內部depenedencies（未遂＃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> 

對於未遂＃1和嘗試3，我得到的下載上班，但是什麼時候上班我在Adobe Reader中打開該文件，它說「Adobe Reader無法打開'deed_20170303.pdf'，因爲它不是受支持的文件類型或文件已損壞」

所有幫助表示感謝我可以在我的地圖方法中動態構建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（契稅）印刷 - > 「/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更加熟悉，我希望找到解決這個問題的更好方法。謝謝！