我的 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：圖示型別；}'
如果有人能解釋如何正確解決這個問題，我會很高興。提前致謝
uj5u.com熱心網友回復：
您應該mapper使用適當的型別進行定義
const mapper: Record<string, JSX.Element> = {
possiblePropsValue1: IconType.card,
possiblePropsValue2: IconType.bag,
possiblePropsValue3: IconType.arrow_left,
}
Record<key,value>key作為字串接收，value因為JSX.Element它來自您的IconType回傳值。
uj5u.com熱心網友回復：
您可以使用列舉來簡化字串引數并更好地管理圖示型別。您可以將字串 ( 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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471275.html
上一篇：“物件”型別上不存在屬性“邊界”