Как передать компонент как опору в React и Typescript?

Question

Я новичок в React и создаю компонент вкладки, используя компонент вкладок пользовательского интерфейса материала. Я хотел бы поместить компонент значка UI материала в подпорку ярлыка компонента Tab, но я не знаю, как 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>
);