反应 + 打字稿。 根据动态道具值渲染正确的图标

Question

我的 JSX 中有一个跨度，我想在其中根据动态道具值呈现适当的图标

<span>{IconToProductMap(value)}</span>

这就是这个函数的样子

const IconToProductMap = (value: string) => {
  if (value === 'sampleValue') {
    return <Icon type={IconType.card} />
  }
  if (value === 'sampleValue2') {
    return <Icon type={IconType.card2} />
  }
  return <Icon type={IconType.card3} />
}

这个解决方案真的很糟糕，我希望能够动态分配值，以便我可以像这样呈现图标

    <span>{IconToProductMap[value]}</span>

为了实现这一点，我创建了映射器对象

const mapper = {
  possiblePropsValue1: IconType.card,
  possiblePropsValue2: IconType.bag,
  possiblePropsValue3: IconType.arrow_left,
}

并像这样使用它：

    <span>{mapper[value]}</span>

问题是TS抛出

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“{ possiblePropsValue1: IconType; possiblePropsValue2：图标类型； possiblePropsValue3：图标类型； }'。 在类型 '{ possiblePropsValue1: IconType; 上找不到具有类型参数的索引签名。 possiblePropsValue2：图标类型； possiblePropsValue3：图标类型； }'

有人可以解释一下如何正确解决这个问题吗？

Answer 1

您应该使用适当的类型定义mapper

const mapper: Record<string, JSX.Element> = {
  possiblePropsValue1: IconType.card,
  possiblePropsValue2: IconType.bag,
  possiblePropsValue3: IconType.arrow_left,
}

Record<key,value>以字符串形式接收key ，以JSX.Element形式接收value ，它来自您的IconType返回值。

Answer 2

您可以使用枚举来简化字符串参数并更好地管理图标类型。 您可以将字符串 ( sampleValue ) 存储在枚举中。

enum IconType {
  card = "card",
  bag = "bag",
  arrow_left = "arrow_left"
}

interface IconProps {
  iconType: IconType;
}

const Icon = (props: IconProps) => {
  const { iconType } = props;
  return <div>{iconType}</div>; // just for demonstration
};

export default function App() {

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Icon iconType={IconType.bag} />
    </div>
  );
}