React.js中按user_id为列表项分配交替颜色的实现需求

我有如下对象数组：

let objects = [
{
    id: 1,
    user_id: 2
},
{
    id: 2,
    user_id: 2
},
{
    id: 3,
    user_id: 3
},
{
    id: 4,
    user_id: 4
},
{
    id: 5,
    user_id: 4
},
{
    id: 6,
    user_id: 5
},
{
    id: 7,
    user_id: 4
},
];

需要在React的JSX中遍历该数组，为每个元素分配红色或蓝色，规则如下：

• 相同user_id的元素使用同一种颜色
• 同一user_id后续出现的元素组需切换颜色

示例效果：

• user_id=2的前两个元素：蓝色
• user_id=3的id=3：红色
• user_id=4的id=4、5：蓝色
• user_id=5的id=6：红色
• user_id=4的id=7：蓝色

我当前的代码片段：

{objects.map((x, i) => (
    <> {objects[i-1] !== undefined && objects[i+1] !== undefined && objects[i].user_id !== objects[i-1].user_id && objects[i].user_id !== objects[i+1].user_id } </>
))}

要实现这个需求，关键是先把连续相同user_id的元素划分为独立分组，再为每个分组分配颜色——同时要跟踪每个user_id上次使用的颜色，当该user_id的新组出现时自动切换颜色。

1. 预处理数组，生成带颜色的分组 #

先写个工具函数，遍历原数组完成分组和颜色分配：

const getColoredGroups = (arr) => {
  if (!arr.length) return [];
  const userColorHistory = new Map(); // 记录每个user_id最后使用的颜色
  const groups = [];
  let currentGroup = [arr[0]];
  let currentUserId = arr[0].user_id;

  for (let i = 1; i < arr.length; i++) {
    const item = arr[i];
    if (item.user_id === currentUserId) {
      currentGroup.push(item);
    } else {
      // 为当前组分配颜色：如果该user_id之前用了蓝色，这次换红色，反之用蓝色
      const lastColor = userColorHistory.get(currentUserId);
      const groupColor = lastColor === 'blue' ? 'red' : 'blue';
      groups.push({ items: currentGroup, color: groupColor });
      // 更新该user_id的颜色记录
      userColorHistory.set(currentUserId, groupColor);
      // 开启新的分组
      currentGroup = [item];
      currentUserId = item.user_id;
    }
  }
  // 处理最后一组元素
  const lastColor = userColorHistory.get(currentUserId);
  const groupColor = lastColor === 'blue' ? 'red' : 'blue';
  groups.push({ items: currentGroup, color: groupColor });
  userColorHistory.set(currentUserId, groupColor);

  return groups;
};

// 在React组件中调用该函数
const coloredGroups = getColoredGroups(objects);

2. 在JSX中渲染元素 #

遍历处理好的分组，给每个元素应用对应颜色：

return (
  <div>
    {coloredGroups.map((group, groupIndex) => (
      <div key={`group-${groupIndex}`}>
        {group.items.map(item => (
          <div 
            key={item.id} 
            style={{ color: group.color, margin: '4px 0' }}
          >
            ID: {item.id}，用户ID: {item.user_id}
          </div>
        ))}
      </div>
    ))}
  </div>
);

补充说明 #

• userColorHistory这个Map用来存储每个user_id的颜色使用记录，确保同一user_id的下一个分组自动切换颜色
• 分组仅针对连续相同的user_id，非连续的同user_id会被视为新分组
• 如果你想用CSS类名而非行内样式，只需把style替换为className，比如className={group.color === 'blue' ? 'blue-text' : 'red-text'}，然后在样式表中定义对应的颜色样式

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