[英]react typescript - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type when using country-flag-icons
App.tsx应用程序.tsx
import "./styles.css";
import Person from "./Person";
export default function App() {
return (
<div className="App">
<Person flagNationCode="HK" />
</div>
);
}
Person.tsx个人.tsx
import Flags from "country-flag-icons/react/3x2";
const Person = ({ flagNationCode }: { flagNationCode: string }) => {
const Flag = Flags[flagNationCode];
return (
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flag />
</div>
</div>
</div>
);
};
export default Person;
In the line在行
const Flag = Flags[flagNationCode];
, typescript throws error here , typescript 在这里抛出错误
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/sandbox/node_modules/country-flag-icons/react/3x2/index")'.
No index signature with a parameter of type 'string' was found on type 'typeof import("/sandbox/node_modules/country-flag-icons/react/3x2/index")'.ts(7053)
Is it possible to fix?有可能修复吗?
Codesandbox代码沙盒
https://codesandbox.io/s/react-typescript-forked-j05w6x?file=/src/Person.tsx https://codesandbox.io/s/react-typescript-forked-j05w6x?file=/src/Person.tsx
you would need to ensure flagNationCode
is a key of Flag rather than any string.您需要确保
flagNationCode
是 Flag 的键而不是任何字符串。 For that you could define flagNationCode as keyof typeof Flags
:为此,您可以将 flagNationCode 定义为
keyof typeof Flags
:
import Flags from "country-flag-icons/react/3x2";
const Person = ({ flagNationCode }: { flagNationCode: keyof typeof Flags }) => {
const Flag = Flags[flagNationCode];
return (
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flag />
</div>
</div>
</div>
);
};
export default Person;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.