如何根据数据存在性动态显示或隐藏列表项之间的分隔符

最简洁通用的实现方式是先过滤无效值，再统一用分隔符拼接，原生数组方法已经覆盖了你提到的所有边界场景，不需要手动写多分支三元判断：

<Items
  description={[item1, item2, item3].filter(Boolean).join(' • ')} 
/>

方案说明 #

• 先把所有待展示的条目放到同一数组中，用filter(Boolean)过滤掉所有无效值（包括空字符串、null、undefined等假值）
• 直接用join(' • ')方法对过滤后的数组进行拼接，会自动在两个相邻的有效值之间插入分隔符，不会在开头、结尾出现多余分隔符，也不会因为中间某条为空出现断档：
  • 当item1、item3非空，item2为空时，过滤后数组为[item1, item3]，拼接结果为${item1} • ${item3}，符合你的需求
  • 当只有1个有效值时，直接输出该值，无多余分隔符
  • 当3个值都有效时，拼接结果为${item1} • ${item2} • ${item3}
  • 当所有值都无效时，输出空字符串

适配特殊有效值场景 #

如果你的业务中0、false属于需要展示的有效值，把过滤条件改成自定义规则即可：

// 示例：只过滤null、undefined、空字符串
<Items
  description={[item1, item2, item3]
    .filter(val => val != null && val !== '')
    .join(' • ')} 
/>

优势 #

• 完全覆盖所有边界情况，不需要手动处理各种组合判断
• 扩展性极强，后续新增条目只需在数组中追加元素即可，无需修改逻辑
• 代码简洁易维护，可读性远高于多分支拼接写法

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