首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在React组件中,如何在迭代列表时有条件地显示样式

在React组件中,如何在迭代列表时有条件地显示样式
EN

Stack Overflow用户
提问于 2017-06-27 14:31:31
回答 2查看 63关注 0票数 0

我有一个React组件,列出所有用户和他们的点数排名。我想要指定它是currentUser的哪一行。请参阅组件:

代码语言:javascript
运行
AI代码解释
复制
const RankingsList = ({rankings, currentUserId}) => {
  return (
      <ul className="list-group">
        {rankings.map(r =>
           <li className="list-group-item" key={r.user_id}>
             <p key={ranking.user_id}>{r.display_name} - {r.points}</p>
             <p>!{currentUserId}!</p>
           </li>
        )}
      </ul>
  );
};

对于每一次排名迭代,我都有r.user_id和currentUserId。我想要做的是,当r.user_id == currentUserId应用像active这样的类时。

我应该做内联,还是应该在API上的排名数组中,或者在React的某些区域,比如reducer?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-27 14:40:06

您可以内联执行此操作,例如:

代码语言:javascript
运行
AI代码解释
复制
<li
  className={`list-group-item ${r.user_id == currentUserId ? 'active' : ''}`}
  key={r.user_id}
>

如果你认为它太冗长,你也可以在一个函数中提取它

代码语言:javascript
运行
AI代码解释
复制
<li className={getClassNames(r.user_id)} key={r.user_id}>

React的好处是这只是javascript,所以你可以像没有JSX的情况下那样做。

票数 3
EN

Stack Overflow用户

发布于 2017-06-27 14:39:20

只需将您当前的map替换为:

代码语言:javascript
运行
AI代码解释
复制
{rankings.map(r => {
    const active = r.user_id === currentUserId ? 'active' : '';
    return (
       <li className={`list-group-item ${active}`} key={r.user_id}>
         <p key={ranking.user_id}>{r.display_name} - {r.points}</p>
         <p>!{currentUserId}!</p>
       </li>
    })
)}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44782952

复制
相关文章
OpenGLES(六)-综合案例:索引绘图OpenGLES(六)-综合案例:索引绘图
相信看这篇文章的同学应该对图元装配方式很熟悉了吧?提供一个参考资料,及时使用合理的图元连接方式,还是难以避免顶点的重复声明,不可避免的会占据额外的缓存区内存。列如这种图形:
用户8893176
2021/08/09
6070
OpenGLES(六)-综合案例:索引绘图OpenGLES(六)-综合案例:索引绘图
isa 指针中不同的位代表不同的含义
对象.isa -> 类.super -> 父类.super -> 根类.super -> nil
艳艳代码杂货店
2021/09/26
1.2K0
matlab内建函数怎么不同颜色,matlab分段函数不同颜色绘图
functionfunc_baidu_56568133x=-200:200;y=(x0).*(x.^2+(1-x).^(1/4)-5);figure(1);plot(x,y)fh=@func_baid
全栈程序员站长
2022/07/05
7920
LeetCode 找不同(位运算)(哈希表)
给定两个字符串 s 和 t,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。
SakuraTears
2022/01/13
2870
LeetCode 389. 找不同(位运算)
1. 题目 给定两个字符串 s 和 t,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 2. 解题 2.1 土办法,哈希map
Michael阿明
2020/07/13
2990
LeetCode 389. 找不同(位运算)
git:快速拉取特大仓库
问题 对于特别大的仓库,直接clone需要耗时很久很久。 解决方法 直接新建空仓库,只往里面拉取特定分支。 具体操作 在本地直接新建相应的仓库: mkdir {repo名称} 转为git仓库(即:新建.git/): git init 配置好remote origin: git remote add origin {repo上游地址} 新建分支(若跳过此步,则后面会默认拉取到本地的master分支): git branch {特定分支名} 只拉取特定分支即可(连master都不需要拉): git pul
JNingWei
2020/03/11
1.2K0
Python海龟绘图,绘出最靓丽的景色
大家平时用程序画图的时候是不是都觉得比较棘手了,今天给大家介绍个神奇的画图模块-----turtle。它可以通过一些指令让画笔任意移动,可以说是很智能了。
Python进阶者
2021/07/27
1.9K0
Python海龟绘图,绘出最靓丽的景色
聚簇索引与非聚簇索引(也叫二级索引)--最清楚的一篇讲解
澄清一个概念:innodb中,在聚簇索引之上创建的索引称之为辅助索引,辅助索引访问数据总是需要二次查找,非聚簇索引都是辅助索引,像复合索引、前缀索引、唯一索引,辅助索引叶子节点存储的不再是行的物理位置,而是主键值。
后端技术探索
2019/11/20
63.3K5
聚簇索引与非聚簇索引(也叫二级索引)--最清楚的一篇讲解
mysql 有4种不同的索引
主键索引(PRIMARY) 数据列不允许重复,不允许为NULL,一个表只能有一个主键 唯一索引(UNIQUE) 数据列不允许重复,允许为NULL值,一个表允许多个列创建唯一索引。 可以通过 ALTER TABLE table_name ADD UNIQUE (column); 创建唯一索引 可以通过 ALTER TABLE table_name ADD UNIQUE (column1,column2); 创建唯一组合索引 普通索引(INDEX) 可以通过 ALTER TABLE table_name ADD INDEX index_name (column); 创建普通索引 可以通过 ALTER TABLE table_name ADD INDEX index_name(column1, column2, column3); 创建组合索引 全文索引(FULLTEXT) 可以通过 ALTER TABLE table_name ADD FULLTEXT (column);https://www.alwdzr.com 创建全文索引 索引并非是越多越好,创建索引也需要耗费资源,一是增加了数据库的存储空间,二是在插入和删除时要花费较多的时间维护索引
用户7737280
2020/09/09
1.1K0
mysql 有4种不同的索引
不同组织的窗宽窗位
垂体及蝶鞍区病:变窗宽宜设在200 Hu~250 Hu,窗位45 Hu~50 Hu,
全栈程序员站长
2022/06/24
8690
CreateCompatibleDC与BitBlt绘图
hdc:现有设备上下文环境的句柄,如果该句柄为NULL,该函数创建一个与应用程序的当前显示器兼容的内存设备上下文环境。
全栈程序员站长
2022/07/23
6000
CIRCOS圈图绘制 - 最简单绘图和解释
Circos是绘制圈图的神器,在http://circos.ca/images/页面有很多CIRCOS可视化的示例。 Circos可以在线使用,在线使用时是把表格转为圈图,不过只允许最大75行和75列
生信宝典
2018/02/05
4.9K0
CIRCOS圈图绘制 - 最简单绘图和解释
位与进制
 这里我假设读者有二进制的思维,知道(3)~10~=(011)~2~将十进制转换为二进制的方法
mathor
2018/08/03
5330
[python opencv 计算机视觉零基础到实战] 十二 直方图
在了解图像直方图前我们需要了解一个matplotlib库,matplotlib库和numpy可谓是一对好伴侣,就像泡面伴侣火腿肠一样。
1_bit
2022/01/06
1.2K0
[python opencv 计算机视觉零基础到实战] 十二 直方图
逻辑与(&&)、逻辑或(||)、按位与(&)、按位或(|)、按位异或(^)、按位取反(~)
运算符两边的表达式的值都为false运算结果为false, 其余情况为true。
全栈程序员站长
2022/09/06
1.9K0
最bt的搜索引擎插件!
之前本懂有给大家分享过手机上的万能工具箱,里面包含了几百个手机常用功能,全部都是基于app内部,点开即用。这么好用的东西当然电脑端也不能错过了!
行哥玩Python
2021/01/11
1.3K0
最bt的搜索引擎插件!
【说站】mysql中B+Tree索引和Hash索引的不同
1、hash索引适合等值查询、没办法利用索引完成排序、不支持多列联合索引的最左匹配规则等。
很酷的站长
2022/11/23
5520
mysql前缀索引使用,Mysql:前缀索引与索引[通俗易懂]
一般来说,我很想知道使用前缀索引时是否有任何警告.不考虑性能,如果任何查询必须以不同方式编写,或者客户端是否必须执行额外逻辑,则更多.
全栈程序员站长
2022/08/25
6.2K0
索引与视图
一个多列索引可以认为是包含通过合并(concatenate)索引列值创建的值的一个排序数组。 当查询语句的条件中包含last_name 和 first_name时
全栈程序员站长
2022/09/16
3930
fluent-bit 按 pod 名生成不同索引
EFK 版本:es 7.12, fluent-bit 1.7.5, kibana 7.12
逝兮诚
2021/12/06
1.4K0

相似问题

直方图中最大仓位的计数,C#,夏普

10

Solr索引时间32位与64位

12

DataFrame索引与Ipywidget的交互绘图

114

plt.hist()与np.histogram() -意外结果

12

选择索引与getText索引不同

11
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档