React JSX中!string条件触发ESLint错误，求简洁合规写法

这里有几个简洁的写法，不用额外创建函数，既能满足「空字符串、null、undefined时禁用按钮」的需求，又能通过ESLint校验：

• 显式布尔转换：

  disabled={!Boolean(input)}
  

  Boolean()会把空字符串、null、undefined都转成false，取反后正好触发禁用。这种显式类型转换的写法，能避开ESLint对隐式类型转换的警告。

• 合并空值判断：

  disabled={input == null || input === ""}
  

  input == null是JS里判断null或undefined的简洁写法，再加上空字符串的判断，比你原来的冗长写法少了重复的判断项，更紧凑。

• 可选链+长度判断：

  disabled={!input?.length}
  

  空字符串的length是0，null/undefined用可选链?.访问length会返回undefined，取反后这三种情况都会得到true，刚好符合禁用要求。只要你的ESLint规则允许可选链，这个写法就没问题。

另外提一句：你定义的状态是useState<string>("")，理论上input只会是字符串，但既然你需要覆盖null/undefined的场景，上面的方案都能兼容这三种情况。

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