我正在做一个React项目! 我想知道我们怎么能达到这个结果?
我们如何实现这一目标?还是我们可以同时在两个数组上通过映射进行迭代?
我想要什么?我想用文字(头部)和图像渲染卡片。 我在两个单独的数组中包含了链接和文本。
例如:const projectText = ['x','y','z'];
,
const imgUrl = ['x'....];
等
这里的代码:
{/*NOTE: Don't forget to optimise code as DRY before final build */}
<div ClassName="container">
{projectText.map((project, index) => (
<div key={index} className="project">
<h3>{project}</h3>
<img key={index} src={`../img/${project}.png`} alt={project}/>
<a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
</div>
</div>
))}
{/* experiment train */}
答案 0 :(得分:3)
假设projectText和imageUrl按顺序包含元素,并且元素数量相同,则您可以使用imageUrl
的索引直接访问projectText
数组中的url
<div ClassName="container">
{projectText.map((project, index) => (
<div key={index} className="project">
<h3>{project}</h3>
<img key={index} src={`../img/${imageUrl[index]}.png`} alt={project}/>
<a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
</div>
</div>
))}
{/* experiment train */}
答案 1 :(得分:0)
假设数组的长度相同,则有以下选择:
let names = [];
let images = [];
for (let i = 0; i < names.length; i++) {
console.log(names[i], images[i]);
}
let names = [];
let images = [];
let combined = [];
for (let i = 0; i < names.length; i++) {
combined.push({
name: names[i],
image: images[i]
});
}
,现在使用combined
数组。
答案 2 :(得分:0)
一种更好的方法是维护如下填充的对象数组
const data = [
{projectText: 'a',imageUrl: 'http://linka.com'},
{projectText: 'b',imageUrl: 'http://linkb.com'}
]
遍历此数组将使您可以访问所需的两个字段。此外,如果需要,您可以添加额外的项目而无需麻烦。