处理嵌套条件渲染的最优方案是什么？ESLint嵌套三元规则疑问

首先明确一个核心原则：ESLint规则是为了提升代码可读性和可维护性服务的，永远不要为了强行符合规则牺牲可读性。

针对你的场景的具体分析 #

no-nested-ternary规则的设计初衷，是避免出现层级超过2层、每个分支包含大量计算逻辑的复杂嵌套三元表达式，这种代码后续维护时很难快速理清分支逻辑。但你当前的场景属于非常简单的平级三分支判断，每个分支仅返回组件，原来的嵌套三元写法逻辑清晰、结构紧凑，可读性远高于你改写后的JSX内嵌立即执行函数（IIFE）。
内嵌IIFE的写法额外增加了函数作用域的理解成本，还多出了大量缩进、return语句，反而提升了阅读负担，属于为了符合规则做的过度改造。

更优的改造方案 #

如果不想用嵌套三元，也完全不需要写IIFE，推荐两种更易读的实现方式：

1. 抽离配置映射（优先推荐，扩展性最高）
   把不同索引对应的按钮配置统一存到数组里，渲染时直接取值即可，完全不需要条件判断：

// 逻辑部分抽离，后续加状态只需要改这个数组即可
const statusConfig = [
  { big: true, programmed: true, statusText: 'Programmed' },
  { big: true, confirmed: true, statusText: 'Confirmed' },
  { big: true, soldOut: true, statusText: 'Sold Out' },
]

// JSX渲染部分
<div>
  <StatusButton {...(statusConfig[index] ?? statusConfig[2])} />
</div>

2. 抽离独立渲染函数
   如果判断逻辑后续可能会变复杂，可以把渲染逻辑抽到组件外的独立函数中：

const getStatusButton = (index) => {
  if (index === 0) {
    return <StatusButton big programmed statusText="Programmed" />
  }
  if (index === 1) {
    return <StatusButton big confirmed statusText="Confirmed" />
  }
  return <StatusButton big soldOut statusText="Sold Out" />
}

// JSX渲染部分
<div>{getStatusButton(index)}</div>

如果你的团队都认可原嵌套三元的可读性，也可以直接在对应行加忽略规则的注释即可，不需要强行改造：

<div>
  {/* eslint-disable-next-line no-nested-ternary */}
  { index === 0 ? <StatusButton big programmed statusText="Programmed" />
  : index === 1 ? <StatusButton big confirmed statusText="Confirmed" />
  : <StatusButton big soldOut statusText="Sold Out" /> }
</div>

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