不使用React.Children，如何在不同DOM节点渲染React子元素子集？

要在不使用React.Children.toArray且保留<Breadcrumbs>包裹<Item>写法的前提下，实现溢出项与可见项的拆分渲染，推荐以下两种思路：

方案一：手动处理子元素数组 + DOM尺寸计算 #

直接将props.children转换为数组（完全避开React.Children API），通过克隆子元素注入ref来获取真实DOM尺寸，计算出分割点后分别渲染子集。

完整代码示例 #

import { useState, useEffect, useRef, cloneElement } from 'react';

const Breadcrumbs = ({ children }) => {
  const containerRef = useRef(null);
  const itemRefs = useRef([]);
  const [splitIndex, setSplitIndex] = useState(0);

  // 计算容器与子项宽度，确定溢出分割点
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const containerWidth = container.offsetWidth;
    let totalWidth = 0;
    let newSplitIndex = 0;

    itemRefs.current.forEach((itemRef, index) => {
      if (!itemRef) return;
      const itemWidth = itemRef.offsetWidth;
      // 累加宽度超过容器时，记录第一个需要溢出的项索引
      if (totalWidth + itemWidth > containerWidth && newSplitIndex === 0) {
        newSplitIndex = index;
      }
      totalWidth += itemWidth;
    });

    setSplitIndex(newSplitIndex);
  }, [children]);

  // 手动处理子元素数组，克隆并注入ref
  const childrenArray = Array.isArray(children) ? children : children ? [children] : [];
  const processedItems = childrenArray.map((child, index) => {
    if (!React.isValidElement(child)) return null;
    return cloneElement(child, {
      ref: (el) => (itemRefs.current[index] = el),
      key: child.key || index, // 优先使用子元素自身key，无则用索引
    });
  });

  return (
    <div ref={containerRef} style={{ display: 'flex', flexWrap: 'nowrap', overflow: 'hidden', gap: '4px' }}>
      {/* 可见项区域 */}
      <div style={{ display: 'flex', gap: '4px' }}>
        {processedItems.slice(splitIndex)}
      </div>
      {/* 溢出菜单 */}
      {splitIndex > 0 && (
        <div style={{ position: 'relative' }}>
          <button>更多</button>
          <div style={{ position: 'absolute', top: '100%', right: 0, background: '#fff', border: '1px solid #eee', padding: '8px' }}>
            {processedItems.slice(0, splitIndex)}
          </div>
        </div>
      )}
    </div>
  );
};

// 示例Item组件
const Item = ({ children, ...props }) => {
  return (
    <div {...props} style={{ padding: '4px 8px', whiteSpace: 'nowrap', cursor: 'pointer' }}>
      {children}
    </div>
  );
};

方案二：使用React.Children.forEach（规避toArray） #

如果不排斥React.Children的遍历方法，仅避开toArray，可以用React.Children.forEach遍历子元素并构建处理后的数组，同样结合ref计算尺寸。

核心代码片段 #

// 用React.Children.forEach替代toArray
const processedItems = [];
React.Children.forEach(children, (child, index) => {
  if (React.isValidElement(child)) {
    processedItems.push(
      cloneElement(child, {
        ref: (el) => (itemRefs.current[index] = el),
        key: child.key || index,
      })
    );
  }
});

方案优势 #

1. 完全保留了开发者习惯的<Breadcrumbs><Item>...</Item></Breadcrumbs>写法，无需传入items数组
2. 通过真实DOM尺寸计算分割点，符合面包屑溢出的实际业务场景
3. 避开了React.Children.toArray这个遗留API，避免了其可能带来的抽象泄漏问题

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