reactjs - typescript korrekt typ för svg-komponent som passerats som prop

Jag bygger en knappkomponent:

interface ButtonProps {
   startIcon?: ... <-- what type?
}

const Button = ({startIcon: StartIcon}) => {
   return <button>{StartIcon && <StartIcon/>}</button>
}

// usage
<Button startIcon={SomeIcon}/>

Jag använder react-icons-biblioteket, vilken typ bör jag ange i interfacet? Spelar det någon roll för typdeklarationen om jag skickar ett svg-element som startIcon-prop?

Svar #1

Typen på dina ikoner är FunctionComponent så du kan helt enkelt importera det från react-biblioteket:

import React, {FunctionComponent} from 'react';
// rest of the codes ...

interface ButtonProps {
  startIcon?: FunctionComponent 
}

Valfri

Du kan kontrollera typen av dina variabler med en enkel console.log och typeof metod.

Anta denna enkla komponent:

const SampleComponent = () => <p>Hello</p>

Kontrollera nu typen:

console.log(SampleComponent);
console.log(typeof SampleComponent) // function

Nu, kontrollera ikonens typ (importerad från react-icons), den är helt liknande det ovanstående resultatet.

Svar #2

Jag är sen men det kan vara till hjälp för andra

Du kan definiera typ av SVG-ikon i en funktionell komponent som

export interface IconProps {
  style?: StyleProp<ViewStyle>;
  fill?: string;
  width?: number;
  height?: number;
  text?: string;
  fill_1?: string;
  fill_2?: string;
  fill_3?: string;
  fill_4?: string;
}

interface ButtonProps {
startIcon?: ({ fill, width, height, style }: IconProps) => JSX.Element;
}

const Button = ({startIcon: StartIcon}:ButtonProps) => {
   return <button>{StartIcon && <StartIcon/>}</button>
}


//Usage
<Button startIcon={SomeIcon}/>

Relaterade artiklar