React中如何根据逗号分隔字符串选中多个动态按钮？

问题说明 #

我尝试根据字符串选中多个动态生成的按钮，但逗号分隔的字符串无法生效。

我的代码 #

{thisLabels && thisLabels.map((names, index) => (
    <button type="button" className={`btn btn-outline-primary ${urltype === names ? "active" : ""}`} data-bs-toggle="button" autoComplete="off" name={names}>
        {names}
    </button>
))}

// "thisLabels" 输出为 ["apple","grapes","banana","orange"]

场景说明 #

• 正常场景：当urlType为单个字符串（非逗号分隔，例如"apple"）时，单个按钮可正常选中。
• 异常场景：当urlType为逗号分隔字符串（例如"apple,banana,orange,etc"）时，无法选中对应按钮。

预期结果 #

若urlType值为"apple, banana, orange"，则按钮状态如下：

• button-apple（激活状态）
• button-grapes（非激活状态）
• button-banana（激活状态）
• button-orange（激活状态）

解决方案 #

原代码用urltype === names做全等判断，只能匹配单个字符串。要处理逗号分隔的多值，需先将字符串转为数组，再判断当前按钮名称是否在数组内：

修改后的代码：

{thisLabels && thisLabels.map((names, index) => {
  // 将逗号分隔的字符串转为去空格后的数组
  const activeItems = urltype?.split(',').map(item => item.trim()) || [];
  return (
    <button 
      key={index}
      type="button" 
      className={`btn btn-outline-primary ${activeItems.includes(names) ? "active" : ""}`} 
      data-bs-toggle="button" 
      autoComplete="off" 
      name={names}
    >
      {names}
    </button>
  );
})}

关键改动说明 #

1. 使用split(',')将逗号分隔的字符串拆分为数组
2. 用map(item => item.trim())去除每个元素前后的空格（兼容带空格的分隔格式，比如"apple, banana"）
3. 通过includes(names)判断当前按钮名称是否在激活列表中，匹配则添加active类

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