reactjs - Hur skapar jag dynamiskt en JSX-tagg i React med TypeScript?

Jag vill importera react-ikoner dynamiskt.

Detta fungerar i Javascript, men hur konverterar jag detta till Typescript utan att få alla möjliga fel?

Kod:

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

Här är output från .d.ts-filer från react-icons om det hjälper:

// 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 skulle kunna göra det så här:

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 ännu kortare:

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

Måste säga att det känns lite hackigt, så jag skulle försöka importera direkt från paketet istället.

Relaterade artiklar