如何通过反应 typescript 使图标动态化？

Question

sorry but I just started using react and typescript, I need the icon to change according to the status in the AppointmentType the body color works but the icons don't, can someone show me how to solve the problem?抱歉，我刚开始使用 react 和 typescript，我需要根据 AppointmentType 中的状态更改图标，主体颜色有效但图标无效，有人可以告诉我如何解决问题吗？

const MapIcon: { [key in AppointmentType]?: React.FC<IIcon> } = {
          Videocall: Camera,
          Expired: Blocked,
          Confirmed: CheckInCircle,
          New: Hourglass,
          Past: CheckInCircle,
        };

        interface IconProps {
          iconType?: React.FC<IIcon>;
          color: string;
        }
        const IconCustom = (props: IconProps) => {
          const { iconType } = props;
          return <div>{iconType}</div>;
        };

        export const AppointmentCard: React.FC<IAppointmentCard> = ({
          name,
          hourLabel,
          type,
          isBonus,
          isModify,
          wasMade,
        }) => {
          const { t } = useTranslation();
          return (
            <Wrapper type={type}>
              <WrapperConfirmsAppointment>
                <IconCustom
                  iconType={MapIcon[type]}
                  color={dateLabelColors[type] || Theme.colors.candy[500]}
                />
                <Body
                  variant={TypographyVariant.SemiBold}
                  size={BodySize.Body60}
                  margin="0 0 0 6px"
                  color={dateLabelColors[type] || Theme.colors.candy[500]}
                >
                  {t('appointment.appointmentProposal.confirmed')}
                </Body>
              </WrapperConfirmsAppointment>
            </Wrapper>
          );
        };

Answer 1

I believe the problem here is that the IconCustom component just renders the value of the MapIcon object instead of an actual icon.我相信这里的问题是IconCustom组件只是呈现MapIcon object 的值而不是实际的图标。 In order to solve it you need to render the icon itself.为了解决它，您需要渲染图标本身。

There a couple of ways to tackle that:有几种方法可以解决这个问题：

You can alter the MapIcon structure to return the rendered icon (assuming that the values are the icons):您可以更改MapIcon结构以返回呈现的图标（假设值是图标）：

const MapIcon: { [key in AppointmentType]?: React.FC } = {
  Videocall: <Camera />, 
  Expired: <Blocked />
  ....
};

Render the returned value as icons:将返回值渲染为图标：

const IconCustom = (props: IconProps) => {
  const { iconType: IconType } = props;
  return <div><IconType /></div>;
};

如何通过反应 typescript 使图标动态化？

问题描述

1 个解决方案

解决方案1
0 2022-07-28 10:49:55

如何通过反应 typescript 使图标动态化？

问题描述

1 个解决方案

解决方案1 0 2022-07-28 10:49:55

解决方案1
0 2022-07-28 10:49:55