使用字符串React调用JSON数据
使用字符串React调用JSON数据
提问于 2021-02-04 13:57:16
import AsukaData from './info/AsukaData.json'
import JinData from './info/JinData.json'
~~~~
const CharArray = [
'Jin', 'Asuka'
]
{CharArray.map((element,index)=>(
<Route path={`/${element}`}><CharPage Data={`${element}Data`}/></Route>
))}我想用字符串调用JSON data(JinData，AsukaData)，但不知道怎么做..
Data={${element}Data}被识别为字符串。我希望它是上面导入的json。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-04 14:04:27
问题
使用反引号表示字符串插值/模板。
Data={`${element}Data`}这将从数组中获取字符串值，并注入并返回传递给Data属性的新字符串值。
解决方案
如果您只是想映射导入的JSON对象，那么我建议将它们放在数组中。使用对象提供路径键和JSON数据有效负载。
import AsukaData from './info/AsukaData.json'
import JinData from './info/JinData.json'
...
const charArray = [
{ path: 'Jin', data: JinData },
{ path: 'Asuka', data: AsukaData }
];
{charArray.map(({ path, data }) => (
<Route key={path} path={`/${path}`}>
<CharPage Data={data} />
</Route>
))}Stack Overflow用户
发布于 2021-02-04 14:03:17
使用对象而不是数组将数据映射到键
const DataMap = {
'Jin': JinData,
'Asuka': AsukaData
}
{Object.keys(DataMap).map((element,index)=>(
<Route path={`/${element}`}><CharPage Data={DataMap[element]}/></Route>
))}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66040074
复制相关文章
相似问题
腾讯云开发者
