如何在每个React元素之间插入分隔符？以面包屑复合组件开发为例

下面提供两种常用实现方式，你可以根据业务场景选择：

方案1：CSS实现（更推荐） #

不需要修改JS逻辑，性能更好维护成本更低，通过伪元素实现分隔符效果：

import React from "react";
import styled from 'styled-components';

// FlexContainer新增子项样式规则
const FlexContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;

  /* 除第一个面包屑项外，其他项前插入分隔符 */
  p:not(:first-child)::before {
    content: '/';
    margin-right: 8px;
    color: #999;
  }
`;

const BreadcrumbsItem = ({ children }) => (
  <p style={{margin: 0}}>
    {children}
  </p>
);

const Breadcrumbs = ({ children }) => <FlexContainer>{children}</FlexContainer>;

Breadcrumbs.Item = BreadcrumbsItem;

export default Breadcrumbs;

如果不使用CSS-in-JS方案，给FlexContainer加类名breadcrumbs-container，在全局CSS文件中添加对应规则即可。

方案2：React逻辑实现（模拟数组join效果） #

如果需要支持动态自定义分隔符、或者有复杂的分隔符渲染需求，可以通过处理children的方式实现：

import React from "react";
import styled from 'styled-components';

const FlexContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

// 默认分隔符组件，可自定义
const DefaultSeparator = () => <span style={{color: '#999'}}>/</span>;

const BreadcrumbsItem = ({ children }) => (
  <p style={{margin: 0}}>
    {children}
  </p>
);

const Breadcrumbs = ({ children, separator = <DefaultSeparator /> }) => {
  // 将children转为可操作的数组
  const childrenArray = React.Children.toArray(children);
  // reduce遍历在每两个元素中间插入分隔符
  const renderList = childrenArray.reduce((acc, child, index) => {
    if (index === 0) return [...acc, child];
    return [...acc, separator, child];
  }, []);

  return <FlexContainer>{renderList}</FlexContainer>;
};

Breadcrumbs.Item = BreadcrumbsItem;

export default Breadcrumbs;

该方案支持自定义分隔符，使用时直接传prop即可：

<Breadcrumbs separator={<span style={{color: '#666'}}>></span>}>
  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
  <Breadcrumbs.Item>Library</Breadcrumbs.Item>
  <Breadcrumbs.Item>Data</Breadcrumbs.Item>
</Breadcrumbs>

两种方案最终运行效果均符合预期要求。

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