如何在 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 = (&nbsp; &nbsp; &nbsp; <Badge&nbsp; &nbsp; &nbsp; &nbsp; color="primary"&nbsp; &nbsp; &nbsp; &nbsp; className={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; badgeProps.badgeContent === ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : classNames(classes.MuiBadge, classes.MuiBadgeNumber)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; badgeContent={''}&nbsp; &nbsp; &nbsp; &nbsp; invisible={false}&nbsp; &nbsp; &nbsp; &nbsp; {...globalBadgeProps}&nbsp; &nbsp; &nbsp; &nbsp; {...badgeProps}&nbsp; &nbsp; &nbsp; ></Badge>&nbsp; &nbsp; )注意包装它。()然后像这样做：&nbsp; &nbsp; &nbsp; &nbsp;<Tab&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label={label}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...globalTabProps}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...tabProps}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; classes={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper: cx('MuiTab-wrapper'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />它内部做了什么：const WhateverComponent = (props) => (&nbsp; <div>&nbsp; &nbsp;...&nbsp; &nbsp;{props.label}&nbsp; </div>);