我试图连接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 /&#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。谢谢。
答案 0 :(得分:2)
@ 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越来越熟悉,我希望找到一种更好的解决方法。谢谢!