如何简化重复引用变量的三元表达式？React语法简化咨询

当然可以！这种重复访问同一个对象的写法确实有点冗余，我给你几个实用的简化方案，适配不同的场景：

方案1：ES2020+ 特性（最简洁） #

用可选链操作符（?.）搭配空值合并运算符（??），一行就能搞定，完美匹配原逻辑：

{this.state.members[activeMemberId]?.id ?? null}

原理很直观：

• 可选链?.会先检查this.state.members[activeMemberId]是否存在（不为null/undefined），如果不存在直接返回undefined；
• 空值合并??会把undefined转换成null，和你原表达式的逻辑完全一致。

方案2：提前缓存变量（兼容旧环境） #

如果你的项目还没升级到支持ES2020的环境，或者想让代码可读性更高，可以先把重复引用的对象提取出来：
比如在组件的render方法（或者函数组件的渲染逻辑里）提前定义：

const currentMember = this.state.members[activeMemberId];

然后在模板里直接用：

{currentMember ? currentMember.id : null}
// 要是环境支持可选链，也可以写成 {currentMember?.id ?? null}

这样不仅避免了重复访问，后续如果还要用到这个成员的其他属性，也能直接复用变量。

避坑提醒：别用逻辑与（&&）替代 #

可能有人会想到用{this.state.members[activeMemberId] && this.state.members[activeMemberId].id}，但这个写法有坑：如果id本身是假值（比如0、''、false），会返回这个假值而不是null，和你原逻辑不符，所以不推荐这种写法哦。

内容的提问来源于stack exchange，提问作者kubwosz