JSX中onClick结合三元表达式绑定多执行逻辑的语法报错问题咨询

核心报错根因 #

你碰到的expected-an-assignment-or-function-call-and-instead-saw-an-expression报错，根源不是JSX或者三元绑定逻辑本身，而是箭头函数代码块内存在无效的孤立表达式：
看你出问题的代码片段：

onClick={!isRecording ? () => {modalPortal.current.open();beginRecording} : endRecording }

这里箭头函数的花括号代码块中，写完modalPortal.current.open(); 之后，你单独把beginRecording这个函数标识符写在了分号后面，既没有加括号触发函数调用，也没有给变量赋值，JS解析器遇到这个无意义的孤立标识符，就会抛出对应报错。 #

可正常运行的修正写法 #

1. 直接修正原三元绑定的语法错误 #

只需要把箭头函数里漏写的函数调用补上括号，保证代码块内的每一行都是可执行的函数调用即可：

<button
  onClick={
    !isRecording 
      ? () => {
          modalPortal.current.open();
          beginRecording(); // 必须加括号执行，不能仅写函数名
        } 
      : endRecording
  }
> 
</button>

注意：三元运算符的两个分支不需要做特殊格式调整，只要保证两个分支返回的都是可被React识别的事件处理函数即可——你原来的写法里一个分支返回自定义箭头函数，另一个分支直接返回endRecording，类型是完全匹配的，本身的三元逻辑没有问题。

2. 抽离独立处理函数的正确写法 #

你之前尝试把逻辑抽离为单独函数但运行失败，通常是踩到了两个常见的小坑：抽离时漏写函数调用、绑定的时候多套了一层括号导致函数在渲染时就被执行。
正确的抽离写法如下：

export default function RecordPage() {
  let [audioURL, isRecording, beginRecording, endRecording, timer] = RecorderContext(); 
  const modalPortal = useRef(null);

  // 在组件作用域定义独立的点击处理函数，逻辑可读性更高
  const handleRecordButtonClick = () => {
    if (isRecording) {
      endRecording();
      return;
    }
    // 未处于录制状态时的执行逻辑，按实际顺序排布即可
    modalPortal.current.open();
    beginRecording();
  }

  // JSX中直接绑定抽离好的函数，不需要再写复杂的三元判断
  return (
    <button onClick={handleRecordButtonClick}> 
      {isRecording ? "结束录制" : "开始录制"}
    </button>
  )
}

同类高频踩坑提醒 #

• 不要在箭头函数代码块内只写函数名不调用：比如() => { beginRecording } 这种写法等价于函数把beginRecording作为返回值返回，根本不会触发函数执行
• 不要给绑定的事件处理器多加括号：比如onClick={handleRecordButtonClick()} 这种写法会在组件每次渲染时就直接执行函数，不是点击时才触发，很容易触发ref未初始化、状态提前更新的异常
• 不推荐省略箭头函数花括号的写法来拼接逻辑：比如() => modalPortal.current.open() + beginRecording() 这种虽然能跑通，但逻辑可读性差，还容易因为函数返回值的类型差异出现预期外的执行中断
• 保证三元分支返回值类型一致：不要出现一个分支返回函数、另一个分支返回字符串/数字的情况，否则React在触发事件时会抛出类型错误

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