React组件C如何交替渲染A/B的Div数组？能否对导入组件调用map？

1. 是否可以强制'CC' div交替显示两个数组的元素，即A的元素、B的元素、A的元素……以此类推？ #

可以实现，但不能直接用当前A、B组件的写法完成——因为A、B现在是直接返回渲染好的React元素片段，组件C拿到的是已经组合好的元素集合，没法拆分重组。

有两种可行的实现思路：

• 思路一：让A、B暴露内部的div数组数据
  改造A、B组件，不再直接渲染内容，而是把生成的divArray通过props回调传递给C，由C负责合并成交替数组后渲染。示例代码：

  // 改造后的组件A
  function A({ onDataReady }) {
    const divArray = [...]; // 原有的数组生成逻辑
    useEffect(() => {
      onDataReady(divArray);
    }, [divArray, onDataReady]);
    return null; // 暂不渲染内容
  }
  
  // 组件C的实现
  function C() {
    const [aElements, setAElements] = useState([]);
    const [bElements, setBElements] = useState([]);
  
    // 合并生成交替排列的数组
    const mergedElements = [];
    const maxLen = Math.max(aElements.length, bElements.length);
    for (let i = 0; i < maxLen; i++) {
      if (aElements[i]) mergedElements.push(aElements[i]);
      if (bElements[i]) mergedElements.push(bElements[i]);
    }
  
    return (
      <div className='CC'>
        {mergedElements}
        <A onDataReady={setAElements} />
        <B onDataReady={setBElements} />
      </div>
    );
  }
  

• 思路二：将数组生成逻辑迁移到C组件
  如果A、B的divArray是基于全局状态生成的，可直接把数组生成逻辑移到C中，分别生成对应A、B的元素数组，再合并交替渲染。

2. 是否可以在组件C的return语句中对导入的组件调用.map方法？ #

不行。<A/>是一个React元素实例，而map是数组的专属方法——只有数组类型才能调用map。组件A本身不是数组，无法直接对其调用map。

如果想要遍历处理A返回的元素，必须先拿到A内部的divArray数据（参考问题1的实现思路），拿到数组后才能使用map进行处理。

内容的提问来源于stack exchange，提问作者E.Z