javascript - 元组/二维数组的 ES6 映射函数

Question

我正在尝试编写一个 map 函数来返回导航栏。 我有一个数组/字典，我想使用看起来像这样的 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>
    )}

如果我尝试将其映射为二维数组，我的 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