Question

我正在尝试编写地图函数以返回导航栏。我有一个数组/字典，我想使用看起来像这样的map函数来遍历

[['Text', './link.html'],
 ['Text2', './link2.html'],
 ['Text3', './link3.html']]

否则

{'Text', './link.html',
 'Text2', './link2.html',
 'Text3', './link3.html'}

无论我需要遍历的任何类型都没有关系，我只想遍历2组，理想情况下，我想使用元组，但看起来并不是我所读的选项

在查看使用dict/object method的解决方案时，我不知道如何同时访问键和值。例如。

var NavBar = (props) => {

    return (
        <div id="NavMain">
            {Object.keys(props.links).map((link,index) => {
                return <NavBarItem link={link} />
                {/* Where do I access the key? */}
            })}
        </div>
    )}

如果我尝试将其映射为2d数组，则我的IDE在下面的代码中的“行”，“文本”和“ />”下方显示了一些错误行

var NavBar = () => {
      
    return (
        <div id="NavMain">
            {this.props.links.map((row,index) => {
                return <NavBarItem link=row[1] text=row[0] />
            })}
        </div>
    )}

我查找的其他解决方案确实很混乱。我想知道是否有一种干净的方法可以对2套使用map函数。

Answer 1

您可以在.map()内部使用数组解构，如下所示：

因此，假设您有一个数组数组的数据集：

const arr = [
     ['Text', './link.html'],
     ['Text2', './link2.html'],
     ['Text3', './link3.html']
]

var NavBar = (props) => {
    return(
      <div id="NavMain">
        {arr.map(([text, link]) => {
           return <NavbarItem link={link} text={text}/>
        })}
      </div>
    )
}

我们知道，第一项是text，第二项是link。

有关工作示例，请参见沙盒：https://codesandbox.io/s/stoic-payne-9zdp3

Answer 2

您几乎拥有了它。试试这个：

/*
props.links = {
    'Text' : './link.html',
    'Text2' : './link2.html',
    'Text3' : './link3.html'
}
*/

var NavBar = (props) => {
    return (
        <div id="NavMain">
            {Object.keys(props.links).map((key, index) => {
                return <NavBarItem link={props.links[key]} text={key}  />
            })}
        </div>
    )
}

用于元组/ 2d数组的ES6映射函数

2 个答案: