React中如何将子元素数组抽象为组件并正常嵌套使用

你这问题的本质是：当你把<AllMyChildrens />作为子元素传给MyContainer时，MyContainer拿到的children是单个React组件实例，而非AllMyChildrens内部返回的元素数组。React会把自定义组件当作单个子元素处理，所以children是个对象，自然没有map方法。

下面提供两种组件化的解决方案：

方案1：修改MyContainer，自动解析子组件的返回值 #

让MyContainer识别子组件并提取其返回的元素数组，这样你依然能保持<AllMyChildrens />的组件调用写法：

import React from 'react';

const AllMyChildrens = () => {
  return Array.from({ length: 5 }).map((_, index) => (
    <div key={index}>{index}</div>
  ));
};

const MyContainer = ({ children }: { children: React.ReactNode }) => {
  const processedChildren: React.ReactNode[] = [];

  React.Children.forEach(children, child => {
    if (React.isValidElement(child) && typeof child.type === 'function') {
      // 手动调用函数组件，获取它返回的元素数组
      const componentResult = (child.type as React.FC)(child.props);
      // 如果返回的是数组就展开，否则直接加入
      Array.isArray(componentResult) 
        ? processedChildren.push(...componentResult) 
        : processedChildren.push(componentResult);
    } else {
      processedChildren.push(child);
    }
  });

  return (
    <div>
      {processedChildren.map((child, index) => (
        <div key={index}>{child}</div>
      ))}
    </div>
  );
};

const MyApp = () => {
  return (
    <MyContainer>
      <AllMyChildrens />
    </MyContainer>
  );
};

方案2：使用Render Props模式（更通用解耦） #

如果不想修改MyContainer的原有逻辑，可以用Render Props让AllMyChildrens提供数据，由调用方决定渲染方式：

import React from 'react';

// 改为Render Props组件，只提供数据
const AllMyChildrens = ({ render }) => {
  const items = Array.from({ length: 5 }).map((_, index) => index);
  return items.map((item, index) => render(item, index));
};

const MyContainer = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      {React.Children.toArray(children).map((child, index) => (
        <div key={index}>{child}</div>
      ))}
    </div>
  );
};

const MyApp = () => {
  return (
    <MyContainer>
      <AllMyChildrens render={(index) => <div key={index}>{index}</div>} />
    </MyContainer>
  );
};

注意点 #

• 方案1仅适配函数组件，类组件的解析逻辑会更复杂，更推荐方案2或你已经在用的函数调用方式。
• 尽量避免在MyContainer中耦合特定组件的逻辑，Render Props或直接传递数组的方式灵活性更高。

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