社会图标组件的多态类型记录组件

Question

我正在尝试为社会图标创建一个多态组件

import React from 'react';
import styles from 'styles/pro.module.scss';
import {
  Facebook, Instagram, Pinterest, Twitter,
} from 'react-bootstrap-icons';
import { Button } from 'react-bootstrap';
 

type SocialButtonProps =React.PropsWithChildren<{
  network: 'Instagram' | 'Facebook' | 'Pinterest' | 'Twitter' ;
    url: string ;
}>;

const SocialButton = ({
  url, network: Network, children,
}: SocialButtonProps) => (

  <Button className={`rounded-pill p-2 pro_${Network}`} variant="secondary" href={url} target="_blank">
    <Network className="fs-3 fw-bold" />

  </Button>
);


export default SocialButton;

它在<Network className="fs-3 fw-bold" />上给了我以下错误

Property 'Facebook' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Property 'Instagram' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Property 'Pinterest' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
Property 'Twitter' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

知道我在这里错过了什么吗。

Answer 1

Facebook, Instagram, Pinterest, Twitter是组件，而不是字符串。您需要键入network作为这些组件的任何类型(您可以使用typeof获取变量的类型：

type SocialButtonProps =React.PropsWithChildren<{
  network: typeof Instagram | typeof Facebook | typeof Pinterest | typeof Twitter ;
    url: string ;
}>;

const SocialButton = ({
  url, network: Network, children,
}: SocialButtonProps) => (

  <Button className={`rounded-pill p-2 pro_${Network}`} variant="secondary">
    <Network className="fs-3 fw-bold" />

  </Button>
);

操场连接