如何将2个数组值映射/循环到具有href和text的锚点标记

Question

我正在尝试映射来自两个不同数组的值，其中一个包含链接，另一个包含选项卡名称。我有一个锚标记，它由href和text字符串组成。有没有一种方法可以映射/循环2个数组中的值来提供值。应用程序内置在React中。

阵列

const links = ['#all', '#aew', '#roh', '#impact']
const tabnames = ['All', 'AEW', 'ROH', 'Impact']
const classnames = ['One', 'Two', 'Three', 'Four']

代码

<a 
href='#link' 
>
tabname
</a>

如果我尝试在a上映射3个数组，再映射一个用于类名，会发生什么？

代码

<a 
href='#link'
className='classname'
>
tabname
</a>

Answer 1

您只需使用.map()并向其传递一个具有2个参数的函数，映射函数最多可以有3个参数，.map((element, [index], [array]) => ...)、索引和数组是可选的，索引可以用于访问第二个数组的元素

这里有一个代码剪辑，应该对你有效(根据编辑后的答案进行调整(：

...
{
links.map((elem, index) => (
<a href={elem} className={classnames[index]}>{tabnames[index]}</a>
))
}
...

---

如果可能的话，我建议将所有数组组合成一个对象数组，因为具有相同索引的所有元素都在一起使用，所以组合它们是有意义的，这看起来像这样：

const links = [{
href: '#all',
tabName: 'All',
className: 'One'
},{
href: '#aew',
tabName: 'AEW',
className: 'Two'
},{
href: '#roh',
tabName: 'ROH',
className: 'Three'
},{
href: '#impact',
tabName: 'Impact',
className: 'Four'
}];
...
{
links.map((el) => (
<a href={el.href} className={el.className}>{el.tabName}</a>
))
}
...

Answer 2

您可以使用map((

const links = ["#all", "#aew", "#roh", "#impact"];
const tabnames = ["All", "AEW", "ROH", "Impact"];
const output = links.map((el, i) => (<a href={el}>{tabnames[i]}</a>));