如何在 React 和 Typescript 中將組件作為道具傳遞？

Question

我是 React 新手，正在使用 Material UI 的 Tabs 組件構建一個選項卡組件。 我想將 Material UI 徽章組件放置在 Tab 組件的 label 道具中，但我不確定如何 go 來解決這個問題。

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>
);