如何获取React组件的直接子元素并实现逐个展示？

要在BillBoard组件中获取并逐个展示传入的直接子元素（video、img、p），可以利用React提供的React.Children工具处理子元素集合，具体实现如下：

修改后的BillBoard组件代码 #

import React from 'react';

const BillBoard = ({ children }) => {
  // 将children转为可遍历的数组，确保获取所有直接子元素
  const directChildren = React.Children.toArray(children);

  return (
    <>
      <h2>Billboard</h2>
      <div className="BillBoard__frame">
        {directChildren.map((child, index) => (
          // 给每个子元素添加容器（可选，方便样式控制），并设置唯一key
          <div key={index} className="BillBoard__slide">
            {child}
          </div>
        ))}
      </div>
    </>
  );
};

关键逻辑说明 #

• React.Children.toArray(children)：React的children属性可能是单个元素、多个元素或Fragment包裹的内容，这个方法会把它们统一转换为标准数组，确保我们能准确拿到所有直接传入的子元素（也就是你传入的video、img、p），不会处理子元素内部的嵌套内容。
• 遍历渲染：通过map遍历数组，逐个渲染每个子元素。这里给每个子元素套了div.BillBoard__slide容器，方便后续添加轮播、滑动等样式逻辑；如果不需要额外容器，直接渲染{child}即可。
• key的设置：React列表渲染要求每个项有唯一key，这里用index作为临时方案。如果你的子元素本身具备唯一标识（比如自定义的slide-key属性），建议替换为child.props['slide-key']这类唯一值，避免index可能引发的渲染性能问题。

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