React如何在方法中进行组合JSX？

Question

我想要做到如下的面包屑：

<Breadcrumb >
  <Breadcrumb.Item>Home</Breadcrumb.Item>
  <Breadcrumb.Item>Contact</Breadcrumb.Item>
  <Breadcrumb.Item>Telephone</Breadcrumb.Item>
</Breadcrumb>

我的逻辑代码：

type TabsWithCrumbPropsType = {
  label: string, 
  breadcrumbs: string[],  
  children: React.ReactNode,
  closable?: boolean
}[]


// 想要遍历breadcrumbs字符串数组 做出breadcrumb
function initProps(props: TabsWithCrumbPropsType): initialPropsType {
    const retProps: initialPropsType = []
    props.forEach((item, index) => {
      const label = item.label
      const key = index 
      const children = <div>
        <Breadcrumb >
          // 这里有一个需求就是组合Breadcrumb.Item 
        </Breadcrumb>
      </div>
    })

如上，我像要使用一个方法来进行遍历组成Breadcrumb.Item。
请问应该如何做呢？这里不是JSX中，是一个方法中，如何在方法中进行组合JSX？

Answer 1

function initProps(props: TabsWithCrumbPropsType): initialPropsType {
    const retProps: initialPropsType = []
    props.forEach((item, index) => {
      const label = item.label
      const key = index 
      const breadcrumbItems = item.breadcrumbs.map(breadcrumb => (
        <Breadcrumb.Item key={breadcrumb}>{breadcrumb}</Breadcrumb.Item>
      ));
      const children = (
        <div>
          <Breadcrumb>
            {breadcrumbItems}
          </Breadcrumb>
        </div>
      );
      // ... 
    })
    return retProps;
}