如何实现类似Array.join()效果拼接JSX元素，解决渲染显示异常问题

你遇到的问题核心原因是Array.join()会强制将数组元素转为字符串，而React的<Link>组件本质是JS对象，调用toString()后就会输出[object Object]，无法正常渲染组件。直接渲染数组时React会按顺序输出所有元素，自然没有分隔符，以下是几种可行的实现方案：

方法1：使用reduce拼接元素+分隔符 #

写法直观，不会产生多余的末尾逗号：

const artists = this.props.result.artists.reduce((acc, artist, index) => {
  // 除第一个元素外，每个元素前先插入分隔符
  if (index > 0) {
    acc.push(', ');
  }
  acc.push(<Link value={artist.name} className='artist-title'>{artist.name}</Link>);
  return acc;
}, []);

之后直接渲染{artists}即可得到预期效果。

方法2：使用flatMap批量插入分隔符 #

比reduce写法更简洁，React 16+原生支持渲染数组内的文本节点：

const artists = this.props.result.artists.flatMap((artist, index, array) => {
  // 最后一个元素不需要追加分隔符
  return index === array.length - 1 
    ? [<Link value={artist.name} className='artist-title'>{artist.name}</Link>]
    : [<Link value={artist.name} className='artist-title'>{artist.name}</Link>, ', '];
});

直接渲染{artists}即可。

方法3：用CSS实现分隔符（无需修改JS逻辑） #

如果不想改动JS代码，可以直接通过样式实现分隔效果，性能更好：
首先保留原有的map写法：

const artists = this.props.result.artists.map((artist) => {
  return <Link value={artist.name} className='artist-title'>{artist.name}</Link>
});

再添加对应的CSS规则：

.artist-title:not(:last-child)::after {
  content: ', ';
}

内容的提问来源于stack exchange，提问作者Lux-Coded