扩展React组件以添加自定义字段？

Question

我正在尝试创建一个从chakra-ui返回Flex元素的组件，自然地，我想在使用组件时保留Flex Type的自动完成功能，但是我想想为其添加一个额外的道具“ iconName”。

这是我写的代码：

type TFlex = typeof Flex

const Tab: TFlex = ({ iconName, ...props }) => {
  return (
    <Flex align="center" height="12" minWidth="12" {...props}>
      <Icon name={iconName} size="8" />
    </Flex>
  )
}

export default Tab

但是这样做会产生以下错误：

根据我的理解，我需要：

• 扩展FlexProps Inteface并将其命名为MyFlexProps
• 扩展Flex Type并将其命名为MyFlexType
• 使用MyFlexType输入我的Tab实例

但是不幸的是，我无法完成这项工作，而且我不确定这是否是正确的方法吗？

非常感谢您的帮助。

Answer 1

结果证明这解决了我的问题：

interface ITab extends FlexProps {
  iconName?: string
}

const Tab: React.FC<ITab> = ({ iconName, ...props }) => {
  return (
    <Flex align="center" height="12" minWidth="12" {...props}>
      <Icon name={iconName} size="8" />
    </Flex>
  )
}