数组映射生成逗号分隔按钮列表时空格丢失问题求助

你的代码里虽然定义了, 作为分隔符，但每个按钮和分隔符被包裹在独立的<span>中，可能受HTML空格合并规则或CSS影响，导致空格未正确显示。可以通过以下两种方式修复：

方案一：简化原代码并修正语法 #

先修正代码里的笔误（<button{item}</button>缺少大括号，正确写法为<button>{item}</button>），同时简化自执行函数逻辑，确保分隔符的空格能被正常渲染：

{
  equipArray.map((item, index, array) => {
    if (item.toLowerCase() === 'none') {
      return <span key={index}>None</span>;
    }
    return (
      <span key={index}>
        <button>{item}</button>
        {index !== array.length - 1 ? ', ' : ''}
      </span>
    );
  })
}

方案二：使用reduce插入分隔符（更可靠） #

通过reduce方法在按钮元素之间直接插入, 分隔符，避免容器元素对空格的干扰：

{
  equipArray.map((item, index) => {
    if (item.toLowerCase() === 'none') {
      return <span key={index}>None</span>;
    }
    return <button key={index}>{item}</button>;
  }).reduce((prev, curr) => {
    return prev ? [prev, ', ', curr] : curr;
  }, null)
}

这种方式会把分隔符作为独立文本节点插入到两个按钮之间，确保最终渲染结果为One, Two, Three, Four。

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