反应性-动态使用国旗图标库
反应性-动态使用国旗图标库
提问于 2021-01-12 10:14:22
我们使用的是https://www.npmjs.com/package/country-flag-icons库，它允许使用标志图标以这样的方式作出反应：
import Flags from 'country-flag-icons/react/3x2'
<Flags.US title="United States" className="..."/>但是我如何动态地使用它呢？因为国家代码是通过服务返回的。
我是说这样的解决方案：
<Flags.{myVar} title="United States" className="..."/>编辑这是我的文件：
import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";
const Person = ({ linkDetail, flagNationCode }) => (
<Link to={linkDetail}>
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flags.US />
)}
</div>
</div>
</div>
</Link>
);
export default Person;回答 3
Stack Overflow用户
回答已采纳
发布于 2021-01-12 10:22:40
您需要将组件选择为以大写字母开头的变量，并将其用作组件，例如：
const Person = ({ linkDetail, flagNationCode }) => {
const Flag = Flags[flagNationCode];
return (
<Link to={linkDetail}>
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flag />
</div>
</div>
</div>
</Link>
);
};Stack Overflow用户
发布于 2021-01-12 10:22:32
您可以将您想要加入的旗帜拉到变量中，然后将其用作组件。
import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";
const Person = ({ linkDetail, flagNationCode }) => {
const Flag = Flags[flagNationCode];
return (
<Link to={linkDetail}>
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flag />
</div>
</div>
</div>
</Link>
)};
export default Person;Stack Overflow用户
发布于 2022-09-20 12:47:38
对于任何有问题的人：Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
尝尝这个
import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";
const Person = ({ linkDetail, flagNationCode }) => {
const obj: Record<string, FlagComponent> = Flags;
const Flag = Flags[flagNationCode];
return (
<Link to={linkDetail}>
<div className="person-footer">
<div className="info">
<div className="label">{flagNationCode}</div>
<div className="value">
<Flag />
</div>
</div>
</div>
</Link>
)};
export default Person;添加此转换const obj: Record<string, FlagComponent> = Flags;对我有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65681881
复制相关文章
相似问题
腾讯云开发者
