React子元素过滤后排序无属性问题及类型转换咨询

一、排序时无法获取属性的原因 #

1. 元素类型不统一：React.Children.toArray返回的数组包含多种类型：
   • ReactElement（如myItem组件、Fragment）：能被React.isValidElement识别，可正常访问props；
   • ReactPortal：它的$$typeof是REACT_PORTAL_TYPE，不属于ReactElement范畴，React.isValidElement会返回false，自然拿不到props；
   • 原生类型（字符串、数字等ReactChild子集）：本身不是组件，没有props属性。
2. Fragment的特殊性：即便Fragment是ReactElement，它本身也没有date属性——date是myItem的props，Fragment仅作为容器包裹myItem，必须深入它的children才能拿到目标组件。

二、提取目标myItem组件的方法 #

要把混杂的子元素统一转换成可处理的myItem实例，需要递归遍历所有子元素，过滤出目标组件：

// 递归提取所有myItem组件
const extractMyItems = (children) => {
  const items = [];
  React.Children.forEach(children, (child) => {
    // 处理ReactElement
    if (React.isValidElement(child)) {
      // 若是Fragment，递归处理它的子元素
      if (child.type === React.Fragment) {
        items.push(...extractMyItems(child.props.children));
      } 
      // 若是目标myItem组件，直接收集
      else if (child.type === MyItem) {
        items.push(child);
      } 
      // 其他组件，递归处理它的子元素
      else {
        items.push(...extractMyItems(child.props.children));
      }
    } 
    // 处理ReactPortal，递归处理它的内容
    else if (child?.$$typeof === Symbol.for('react.portal')) {
      items.push(...extractMyItems(child.children));
    }
    // 原生类型（字符串、数字等）直接忽略
  });
  return items;
};

三、按date分组排序渲染 #

拿到所有myItem后，即可按date属性完成排序、分组渲染：

const GroupedMyItems = ({ children }) => {
  // 提取所有myItem
  const myItems = extractMyItems(children);
  
  // 1. 按date排序（假设date为可比较的字符串/时间戳）
  const sortedItems = [...myItems].sort((a, b) => {
    return new Date(a.props.date) - new Date(b.props.date);
  });
  
  // 2. 按日期分组（按YYYY-MM-DD格式分组）
  const groupedItems = sortedItems.reduce((groups, item) => {
    const dateKey = new Date(item.props.date).toISOString().split('T')[0];
    if (!groups[dateKey]) {
      groups[dateKey] = [];
    }
    groups[dateKey].push(item);
    return groups;
  }, {});
  
  // 3. 渲染分组列表
  return (
    <div className="grouped-list">
      {Object.entries(groupedItems).map(([date, items]) => (
        <div key={date} className="date-group">
          <h3>{date}</h3>
          <div className="item-list">
            {items}
          </div>
        </div>
      ))}
    </div>
  );
};

补充说明 #

• 如果myItem是高阶组件包装后的产物，判断child.type时可能需要改用displayName识别；
• 若date格式不统一，需先做格式化处理，避免分组出错。

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