React中如何将2~3个数组映射到a标签的href、文本及className属性

你提供的两个数组下标是一一对应的，直接遍历任意一个数组，通过遍历的下标获取另一个数组的对应值即可，JSX示例代码如下：

const links = ['#all', '#aew', '#roh', '#impact']
const tabnames = ['All', 'AEW', 'ROH', 'Impact']

// 组件内渲染逻辑
return (
  <>
    {links.map((hrefItem, index) => (
      <a 
        key={index}
        href={hrefItem}
      >
        {tabnames[index]}
      </a>
    ))}
  </>
)

提示：生产环境如果有唯一业务标识可以替换key的值为业务ID，无唯一值时用下标也可正常运行

逻辑和双数组完全一致，只需要通过同一个下标取classnames数组的对应值赋值给className属性即可，示例代码如下：

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

// 组件内渲染逻辑
return (
  <>
    {links.map((hrefItem, index) => (
      <a 
        key={index}
        href={hrefItem}
        className={classnames[index]}
      >
        {tabnames[index]}
      </a>
    ))}
  </>
)

注意事项 #

• 必须保证参与映射的所有数组长度完全一致，否则会出现属性不匹配、取值为undefined的问题
• 若无法保证数组长度一致，可在渲染前增加长度校验，避免渲染异常：

if (links.length !== tabnames.length || links.length !== classnames.length) {
  // 可替换为自定义错误提示逻辑
  return null
}

内容的提问来源于stack exchange，提问作者Federick J