ReactJS/JSX中onClick元素内能否编写if/else条件？场景解法咨询

你可以把点击逻辑抽成组件内的独立函数，通过传入row参数来获取resignationId，这样既避免在JSX里写复杂的三元表达式，也能把逻辑从渲染代码里分离出来，更易维护。

方法一：抽成普通组件函数 #

在表格组件内部（TableBody所在的组件中）定义处理点击的函数：

const handleButtonClick = (row) => {
  if (props.heading === "CLEARANCES") {
    markCleared(row.resignationId);
  } else {
    navigate(`/resignations/${props.role}/action/${row.resignationId}`);
  }
};

然后在Button的onClick里调用这个函数：

<Button
  onClick={() => handleButtonClick(row)}
  variant="outlined"
  size="small"
  color="success"
>
  {props.buttonTitle}
</Button>

方法二：用useCallback优化性能（可选） #

如果表格数据量大、频繁重新渲染，可以用useCallback缓存函数，避免每次渲染都创建新的函数实例：

import { useCallback } from 'react';

// 在组件顶部定义
const handleButtonClick = useCallback((row) => {
  if (props.heading === "CLEARANCES") {
    markCleared(row.resignationId);
  } else {
    navigate(`/resignations/${props.role}/action/${row.resignationId}`);
  }
}, [props.heading, props.role, markCleared, navigate]); // 需列出所有依赖项

onClick的用法和方法一完全一致。

优化逻辑的原因 #

你之前把逻辑写在onClick的三元表达式里，虽然能运行，但可读性差且不易调试。抽成独立函数后，逻辑更清晰，还能方便地添加调试日志或扩展分支逻辑。只要把row作为参数传入函数，就能拿到resignationId，完全不需要把函数局限在JSX的作用域内。

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