如何在 React 和 Typescript 中将组件作为 prop 传递？

Question

我是 React 的新手，正在使用 Material UI 的 Tabs 组件构建一个选项卡组件。我想将材质 UI 徽章组件放在选项卡组件的标签属性中，但我不确定如何执行此操作。Tab 组件如下所示：        <Tab          key={i}          label={label}          {...globalTabProps}          {...tabProps}          classes={{            wrapper: cx('MuiTab-wrapper'),          }}        />我正在尝试按如下方式添加徽章：    const label = {      <Badge        color="primary"        className={          badgeProps.badgeContent === ''            ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)            : classNames(classes.MuiBadge, classes.MuiBadgeNumber)        }        badgeContent={''}        invisible={false}        {...globalBadgeProps}        {...badgeProps}      ></Badge>    };当然，这是错误的（解析错误），但我不认为这是处理这个问题的正确方法。有人能为我指出正确的方向吗？

Answer 1

您应该用 包装它，如下所示。()

const label = (

      <Badge

        color="primary"

        className={

          badgeProps.badgeContent === ''

            ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)

            : classNames(classes.MuiBadge, classes.MuiBadgeNumber)

        }

        badgeContent={''}

        invisible={false}

        {...globalBadgeProps}

        {...badgeProps}

      ></Badge>

    )

注意包装它。()

然后像这样做：

       <Tab

          key={i}

          label={label}

          {...globalTabProps}

          {...tabProps}

          classes={{

            wrapper: cx('MuiTab-wrapper'),

          }}

        />

它内部做了什么：

const WhateverComponent = (props) => (

  <div>

   ...

   {props.label}

  </div>

);