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

【问题标题】：How do I pass a component as a prop in React and Typescript?如何在 React 和 Typescript 中将组件作为道具传递？
【发布时间】：2020-08-20 23:01:40
【问题描述】：

我是 React 新手，正在使用 Material UI 的 Tabs 组件构建一个标签组件。我想将 Material UI 徽章组件放在 Tab 组件的 label 属性中，但我不知道该怎么做。

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

当然，这个错误出来了（解析错误），但我不认为这是处理这个问题的正确方法。

谁能指出我正确的方向？

非常感谢！

【问题讨论】：

您的Tab 使用的接口/类型别名是什么？
不要将 Badge 组件包裹在 { 括号中，而是尝试将其包裹在 ( 括号中。同时声明并将其分配给label

标签： javascript reactjs typescript

【解决方案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>
);

【讨论】：