reactjs - Làm thế nào để tôi tạo thẻ JSX một cách động trong React sử dụng typescript?

Tôi muốn nhập react-icons một cách động.

Điều này hoạt động trong Javascript, nhưng làm thế nào để tôi chuyển nó sang Typescript mà không gặp đủ loại lỗi?

Mã:

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

Đây là kết quả từ các tệp .d.ts của react-icons nếu điều đó hữu ích:

// 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';

Câu trả lời #1

Bạn có thể làm như sau:

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})

Hoặc thậm chí ngắn hơn:

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

Nhưng phải nói rằng cảm giác hơi tạm bợ, nên sẽ thử nhập trực tiếp từ gói thay vào đó.