如何在Area组件的stroke属性中通过多条件设置不同线条颜色？

我有一个图表中的Area组件（对应图表中的线条）：

<Area
  type="monotone"
  strokeWidth={2}
  dataKey="data"
  stroke="#3B82F6" //👈 这是想要修改的部分
  fillOpacity={1}
  fill="url(#colordata)"
/>

映射的数据集如下：

const data = [
  {
    name: "Jan",
    data: 3490,
    data2: 4300,
    data3: 2100,
  },
  {
    name: "Feb",
    data: 2390,
    data2: 3800,
    data3: 2500,
  },
  {
    name: "Mar",
    data: 1890,
    data2: 3000,
    data3: 2181,
  },
  // ...更多数据
];

之前尝试过类似以下写法但无法正常工作：

{data.map((data, index) => (
  <Area
    ...
    stroke={data[1] && "#someColor" & data[2] && "#someColor" ... 

    OR

    stroke={data[1] && "#someColor" : data[2] && "#someColor" ... 
  ...
))}

想知道有没有办法根据索引或多条件为stroke设置不同颜色？目前知道单条件判断的写法，但需要同时满足2-5个不同条件，为2-3条线条设置不同颜色，能否直接在stroke属性中实现？

方法1：嵌套三元表达式（适合2-3个条件） #

可以直接在stroke属性里写嵌套的三元判断，注意把循环变量名改成item避免和外层数组重名：

{data.map((item, index) => (
  <Area
    key={index}
    type="monotone"
    strokeWidth={2}
    dataKey="data"
    stroke={
      index === 0 ? "#3B82F6" : 
      index === 1 ? "#10B981" : 
      index === 2 ? "#F59E0B" : 
      "#6B7280" // 默认颜色
    }
    fillOpacity={1}
    fill="url(#colordata)"
  />
))}

方法2：抽离判断函数（适合多条件场景） #

如果条件较多，嵌套三元可读性差，建议抽成单独函数，还能同时结合索引和数据值判断：

const getStrokeColor = (index, item) => {
  // 根据索引判断
  if (index === 0) return "#3B82F6";
  if (index === 1) return "#10B981";
  // 根据数据值判断
  if (item.data > 3000) return "#EF4444";
  // 默认颜色
  return "#6B7280";
};

{data.map((item, index) => (
  <Area
    key={index}
    type="monotone"
    strokeWidth={2}
    dataKey="data"
    stroke={getStrokeColor(index, item)}
    fillOpacity={1}
    fill="url(#colordata)"
  />
))}

方法3：颜色映射对象（适合固定匹配规则） #

如果是按固定索引或字段值匹配颜色，用对象映射更简洁：

const colorMap = {
  0: "#3B82F6",
  1: "#10B981",
  "Jan": "#EF4444", // 也可以根据name字段匹配
};

{data.map((item, index) => (
  <Area
    key={index}
    type="monotone"
    strokeWidth={2}
    dataKey="data"
    stroke={colorMap[index] || colorMap[item.name] || "#6B7280"}
    fillOpacity={1}
    fill="url(#colordata)"
  />
))}

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