我正在尝试连接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中打开文件时,它说“ Adobe 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的越来越熟悉,我希望找到一种更好的方法来解决此问题。谢谢!