前端 - 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字符串数组 做出breadcrumbfunction 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;}