React中如何通过if-else条件判断控制Grade按钮禁用状态

React是声明式框架，不要用原生JS操作DOM的思路手动修改按钮属性，你只需要通过数据控制按钮的disabled属性即可，不需要专门写函数查找按钮节点修改状态。

你现有代码的问题 #

• 三元判断逻辑错误：当前逻辑是paperDetails.marks_validation为真时不渲染Grade按钮，和你「保留按钮、仅置灰禁用」的需求不符
• 命令式操作DOM的思路不适配React：React会根据数据自动更新UI，你不需要手动获取按钮实例改禁用状态

正确实现代码 #

直接在渲染时计算按钮的禁用状态，将结果传给Button组件的disabled属性即可，按钮始终保持渲染：

// 计算按钮禁用状态：开启校验且分数大于50时禁用
const isGradeDisabled = paperDetails.marks_validation && target.grade > 50;

<Button
  title="Grade"
  buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
  titleStyle={{fontSize:13}}  
  onPress={setGrading}
  disabled={isGradeDisabled}
  // 如果使用的是React Native系UI库，可补充禁用态样式
  disabledStyle={{backgroundColor: '#ccc', borderRadius: 10}}
/>

逻辑说明 #

• 禁用逻辑直接抽为布尔变量：当paperDetails.marks_validation为真值、且target.grade > 50两个条件同时满足时，isGradeDisabled为true，按钮自动进入禁用状态
• 当paperDetails.marks_validation或target.grade的值变化时，组件会自动重新渲染，按钮的禁用状态会同步更新，不需要手动调用校验函数触发UI改动
• 如果你使用的是原生HTML<button>标签而非第三方UI库的Button组件，写法完全一致，原生标签的disabled属性同样接收布尔值控制状态

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