React中如何正确编写条件语句实现Button组件按条件禁用

你写的代码有两个基础语法/逻辑错误：

1. JSX组件标签内部只能传键值对形式的属性，不能直接塞if/else这类独立的流程控制语句，写了直接报语法错误
2. 你在渲染位置直接调用setDisable改状态，会导致组件无限重渲染——渲染时改状态→状态变了触发重渲染→渲染又改状态，直接死循环。

根据你的需求选就行，第一种最省事：

• 不需要额外存disable状态的写法：disabled属性本身就接受布尔值，你直接把判断条件塞给它就行，JSX里属性用{}包裹就能写合法JS表达式，连单独的state都不用维护：

// 注意：如果quantity会跟着用户操作变，别用var声明普通变量，要用useState存成响应式状态，不然值变了页面不会更新
const [quantity, setQuantity] = useState(11);

<Button
  title="Add Item"
  buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
  titleStyle={{fontSize:13}} 
  disabled={quantity > 10} // 这里直接写判断，大于10就返回true禁用，否则false启用
  onPress={InsertItem}                     
/>

• 如果这个禁用状态还要在别的地方复用，就用useEffect监听quantity的变化同步状态，别直接在渲染位置改：

import { useState, useEffect } from 'react';
const [disable, setDisable] = useState(false);
const [quantity, setQuantity] = useState(11);

// quantity变动时自动更新禁用状态
useEffect(() => {
  setDisable(quantity > 10);
}, [quantity]);

<Button
  title="Add Item"
  buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
  titleStyle={{fontSize:13}} 
  disabled={disable}   
  onPress={InsertItem}                     
/>

JSX里的单大括号{}只能放有返回值的表达式，放不了if/else、循环这类独立语句。如果一定要写分支逻辑，要么把逻辑抽到JSX外面提前算好值，要么用三元表达式、逻辑与短路这类写法，绝对不能在标签属性堆里直接插if块。

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