我正在尝试连接 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,我可以下载,但是当我在 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越来越熟悉,我希望能找到更好的方法来解决这个问题。谢谢!
关于javascript - 使用 map() 方法动态 react 构建 href 文件 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43216655/