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

Question

I am new to React and am building a tab component using Material UI's Tabs component. I'd like to place the Material UI badge component within the Tab component's label prop, but I'm not sure how to go about this.

The Tab component looks as such:

        <Tab
          key={i}
          label={label}
          {...globalTabProps}
          {...tabProps}
          classes={{
            wrapper: cx('MuiTab-wrapper'),
          }}
        />

I'm trying to add the badge as such:

    const label = {
      <Badge
        color="primary"
        className={
          badgeProps.badgeContent === ''
            ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)
            : classNames(classes.MuiBadge, classes.MuiBadgeNumber)
        }
        badgeContent={''}
        invisible={false}
        {...globalBadgeProps}
        {...badgeProps}
      ></Badge>
    };

Of course, this errors out (parsing error), but I don't think this is the correct way to handle this anyway.

Would anyone be able to point me in the right direction?

Many thanks!

Answer 1

You should wrap it with () , like so.

const label = (
      <Badge
        color="primary"
        className={
          badgeProps.badgeContent === ''
            ? classNames(classes.MuiBadge, classes.MuiBadgeDotted)
            : classNames(classes.MuiBadge, classes.MuiBadgeNumber)
        }
        badgeContent={''}
        invisible={false}
        {...globalBadgeProps}
        {...badgeProps}
      ></Badge>
    )

Note the () wrapping it.

Then do it like so:

       <Tab
          key={i}
          label={label}
          {...globalTabProps}
          {...tabProps}
          classes={{
            wrapper: cx('MuiTab-wrapper'),
          }}
        />

What it is done inside:

const WhateverComponent = (props) => (
  <div>
   ...
   {props.label}
  </div>
);