React使用map()遍历数组渲染Tab时如何给首个元素设置default属性

解决方案 #

Array.prototype.map 的回调函数支持传入第二个参数，代表当前遍历项的索引下标，你可以通过判断索引是否为0来动态给第一个Tab添加default属性：

{tabs.map((tab, index) => (
  <Tab
    name={tab.name}
    {...(index === 0 && { default: true })}
  />
))}

可选写法 #

如果你的Tab组件的default属性支持直接传入布尔值，也可以简化为下面的写法，效果完全一致：

{tabs.map((tab, index) => (
  <Tab
    name={tab.name}
    default={index === 0}
  />
))}

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