javascript - 根据 React 中的属性值映射不同的图标
问题描述
https://codesandbox.io/s/r546o8v0kq
我上面的沙箱显示了一组项目的基本映射。这会形成一个注释、日期和图标列表,具体取决于它是什么类型的项目。
我正在使用一些逻辑来映射每个项目以找出它是什么值,基于我为该值分配一个字符串来完成字体真棒徽标的类型。
const noteType = _.uniq(notes.map(value => value.intelType));
const noteIcon = [
`${noteType}`.toUpperCase() == "EDUCATION"
? "paper-plane"
: `${noteType}`.toUpperCase() == "ELIGIBILITY"
? "heart"
: `${noteType}`.toUpperCase() == "GENERAL"
? "twitter"
: null
];
如果“intelType”的值为“education”,它将返回“paper-plane”字符串以完成图标。例如fa fa-${noteIcon}
<List>
{notes.map((note, index) =>
note !== "" ? (
<React.Fragment>
<ListItem className="pl-0">
<i class={`fa fa-${noteIcon}`} aria-hidden="true" />
<ListItemText
secondary={moment(note.createdAt).format("DD-MMM-YYYY")}
/>
</ListItem>
<p>{note.note}</p>
<Divider />
</React.Fragment>
) : null
)}
</List>
它没有被映射并返回所有三个值,这不符合任何条件,因此根据请求返回 null。我有点不知道下一步该做什么。
解决方案
您可以定义一个将英特尔类型映射到图标名称的对象:
const noteIconMap =
{ "EDUCATION": "paper-plane",
"ELIGIBILITY": "heart",
"GENERAL": "twitter",
};
并在渲染中以这种方式查找:
<i class={`fa fa-${noteIconMap[note.intelType.toUpperCase()]}`} aria-hidden="true" />
虽然,请注意,如果存在未定义的情况note
,intelType
调用toUpperCase
将引发错误。
这是工作修改沙箱的链接: https ://codesandbox.io/s/ojz2lzz03z
推荐阅读
- python - 有没有一种使用 Python Openpyxl 在 Excel 中写入数据的简洁方法?
- r - 如何使用条件连接两个表
- node.js - 无法让 React + socket.io 在 Heroku 上工作
- r - 使用 R Shiny 中的 actionButton 更新新表并添加行
- pandas - 多列上的 Lambda 函数
- java - 从 OpenCV.jar 库导入时无法识别 [Java]
- ios - 在 Firestore 集合内的唯一文档内查询
- javascript - 获取对象中的多个 url 反应
- python - 将列表拆分为事件分布的块
- zsh - 如何解决 zsh compinit: MacOS 上的不安全目录问题(其他解决方案失败)