ReactJS中map遍历如何获取末尾数据、设置颜色及给指定li加a标签

实现代码 #

import React from 'react';

const pages = ["main", "about", "contact"];
const pagesList = pages.map((page, index) => {
  // 判断是否为最后一项
  const isLastItem = index === pages.length - 1;
  // 生成首字母大写的显示文本
  const showText = page.charAt(0).toUpperCase() + page.slice(1);
  // 构造li元素，最后一项设置自定义颜色
  const liItem = <li style={isLastItem ? { color: '#f00' } : {}}>{showText}</li>;

  // main和about项外层包裹a标签
  if (['main', 'about'].includes(page)) {
    return (
      <a href={`/${page}`} key={page}>
        {liItem}
      </a>
    );
  }

  // 其余项直接返回，key挂载到Fragment上避免额外dom节点
  return (
    <React.Fragment key={page}>
      {liItem}
    </React.Fragment>
  );
});

// 渲染调用示例
function App() {
  return <ul>{pagesList}</ul>
}

实现说明 #

• 最后一项单独颜色：map方法第二个参数可获取当前项的索引，将索引和数组长度减1对比即可判断是否为最后一项，给对应li元素添加style属性设置自定义颜色即可，颜色值可以根据需求自行修改。
• 按需包裹a标签：判断当前遍历的page值是否属于main/about，符合条件的在li外层套a标签即可，注意遍历生成的所有根元素必须添加唯一的key属性，避免React抛出渲染警告，示例中的href路径可以根据你实际的路由规则调整。

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