React中类似Array.join的数组元素间插入分隔符方法问询

你提到Array.join处理字符串数组时非常实用，现在在React项目中，你需要对React.ReactNode类型的数组做类似操作——在元素之间插入分隔符但保持数组结构，而非拼接成字符串。

你的需求示例代码如下：

let parts: React.ReactNode[] = [];
if (conditionA) {
  parts.push(<div>Component One</div>);
}
if (conditionB) {
  parts.push(<div>Component Two</div>);
}
parts = joinByDelimiterButKeepAsArray(parts, '|');
// 当conditionA和conditionB都为true时，希望parts变为
// [<div>Component One</div>, '|', <div>Component Two</div>]
return (
  <>
    {parts.map((part, i) => (
      <React.ReactFragment key={i}>{part}</React.ReactFragment>
    ))}
  </>
)

解决方案 #

JavaScript/TypeScript/React并没有直接提供这种原生方法，但可以通过几种简单方式实现：

1. 手动封装工具函数

写一个通用函数处理数组，兼容空数组、单元素数组的情况：

function joinNodes(nodes: React.ReactNode[], delimiter: React.ReactNode): React.ReactNode[] {
  if (nodes.length <= 1) return [...nodes];
  
  const result: React.ReactNode[] = [];
  nodes.forEach((node, index) => {
    result.push(node);
    // 最后一个元素后不添加分隔符
    if (index !== nodes.length - 1) {
      result.push(delimiter);
    }
  });
  return result;
}

使用时直接替换你代码中的joinByDelimiterButKeepAsArray即可：

parts = joinNodes(parts, '|');

2. 渲染时直接处理（无需修改原数组）

在map渲染阶段判断是否添加分隔符，更简洁：

return (
  <>
    {parts.map((part, i) => (
      <React.Fragment key={i}>
        {part}
        {/* 非最后一个元素则添加分隔符 */}
        {i !== parts.length - 1 && '|'}
      </React.Fragment>
    ))}
  </>
)

这种方式不需要额外修改parts数组，直接在渲染逻辑中完成需求，适合简单场景。

3. 使用flatMap简化实现

利用ES6的flatMap方法，一行代码生成目标数组：

const joinedParts = parts.flatMap((part, index) => 
  index === 0 ? [part] : ['|', part]
);

flatMap会将每个元素返回的数组展开，第一个元素直接放入结果，后续元素先添加分隔符再放入，自动实现元素间插入分隔符的效果。

额外说明 #

• 分隔符不仅可以是字符串，也可以是React组件，比如：

  joinNodes(parts, <span className="separator">|</span>)
  

• 渲染时注意给每个元素设置唯一的key，如果你的parts元素有自身唯一标识，建议用该标识作为key，而非索引，避免React重渲染警告。

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