React JSX三元表达式中如何正确编写if判断逻辑

你当前的写法存在两个会直接导致代码运行失败的问题：

1. JSX的大括号内、三元运算符的分支位置，只能写入表达式，不支持直接写if这类流程控制语句，直接写入会直接抛出语法错误。
2. 状态更新方法setDisabled不能直接写在JSX渲染逻辑中：渲染过程中执行状态更新会触发组件重渲染，重渲染又会再次执行这段状态更新代码，直接触发无限重渲染死循环，导致页面卡死。

React中状态更新逻辑和UI渲染逻辑要做分离：状态变更逻辑放到副作用钩子或者事件回调中执行，JSX只负责根据已有的状态输出最终UI。

方案1：保留独立disabled状态（适合状态需要复用的场景） #

把判断A值更新禁用状态的逻辑放到useEffect中，只有依赖值变化时才会执行判断，不会触发死循环：

import { useState, useEffect } from 'react';

// 组件内状态声明
const [isDisabled, setIsDisabled] = useState(false);

// 状态更新逻辑独立在渲染逻辑外
useEffect(() => {
  if (voucherDetails.target_shop_name_validation && A > 5) {
    setIsDisabled(true);
  } else {
    // 可根据业务需求调整不满足条件时的状态
    setIsDisabled(false);
  }
}, [voucherDetails.target_shop_name_validation, A]);

JSX部分只保留渲染逻辑，三元分支真值部分如果不需要渲染内容直接返回null即可：

{
  voucherDetails.target_shop_name_validation 
  ? null
  : (
    <Button
      title="SEE NEARBY SHOP"
      buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
      titleStyle={{fontSize:13}} 
      disabled={isDisabled}   
      onPress={NearByShop}                     
    />
  )
}

方案2：直接在渲染时计算属性（更简洁，无状态同步问题） #

如果isDisabled状态只用来控制这一个按钮的禁用属性，完全不需要额外声明状态存值，直接在渲染时计算disabled值即可，代码更简洁也不会有状态不同步的问题：

{
  /* 校验不通过时才渲染按钮 */
  !voucherDetails.target_shop_name_validation && (
    <Button
      title="SEE NEARBY SHOP"
      buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
      titleStyle={{fontSize:13}} 
      disabled={A > 5} // 直接根据A的值计算禁用状态
      onPress={NearByShop}                     
    />
  )
}

如果确实需要在JSX分支中执行多行逻辑，可以用立即执行函数包裹，但绝对不要在里面直接执行无触发条件限制的setState：

{
  cond ? (() => {
    // 这里可以写if等语句，但是不推荐放setState逻辑
    if (A >5) {
      return <div>满足条件</div>
    }
    return <div>不满足条件</div>
  })() : <OtherComponent />
}

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