reactjs - Hvordan oppretter jeg dynamisk en JSX-tag i React ved å bruke TypeScript?

Jeg vil importere react-ikoner dynamisk.

Dette fungerer i Javascript, men hvordan konverterer jeg dette til Typescript uten å få alle slags feil?

Kode:

import * as ReactIcons from 'react-icons/all';
const getIcon = (icon) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

Her er output fra .d.ts-filer fra react-icons hvis det hjelper:

// node_modules/react-icons/all.d.ts
export * from './fa';
export * from './fa';
export * from './io';
export * from './md';
export * from './ti';
export * from './go';
export * from './fi';
export * from './gi';
export * from './gi';
export * from './gi';

Svar #1

Du kunne gjøre det slik:

import * as ReactIcons from 'react-icons/all';

type GetIconProps = {
  icon: keyof typeof ReactIcons;
}

const getIcon = ({icon}: GetIconProps) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

// Example
getIcon({icon: keyof typeof ReactIcons})

Eller enda kortere:

const getIcon = ({ icon }: GetIconProps) => {
  const TagName = ReactIcons[icon];
  return <TagName />;
};

Må si at det føles litt klønete, så jeg ville prøvd å importere direkte fra pakken i stedet.

Relaterte artikler