Javascript onClick内的多个函数，带有三元和参考

这是一个我想在JSX中更好地理解语法的例子

问题: 这项工作：

这是有效的：

{modalPortal.current.open（）}>
祝贺
如果打开此模式，您会发现javascript语法无缝且直观

一起，没有布埃诺

{modalPortal.current.open（）；beginRecording}:endRecording}>

错误： react期望一个赋值或函数调用，而看到一个表达式

---

详情： 这是在一个函数组件中

isRecording

和

endRecording

等是功能组件范围内的对象状态，该功能组件定义了我在应用程序中的页面，

modalPortal

是一个参考：

导出默认函数RecordPage（）
{
让[audioURL，isRecording，beginRecording，endRecording，timer]=RecorderContext（）；
const modalPortal=useRef（null）；
...
}

我还尝试了各种排列，将其传递给执行条件求值的单个函数等

onClick={domanyings（）}>

无论有没有箭头，无论是括号还是传入参数，这一切似乎都不起作用。我希望有知识的人能给我一个明确的答案

---

对我尝试过但不起作用的东西的引用：

---

您可以将三元/分支逻辑移动到单个回调函数中

<button
  onClick={() => {
    if (!isRecording) {
      modalPortal.current.open();
      beginRecording();
    } else {
      endRecording();
    }
  }
>
  ...
</button>

---

您可以将三元/分支逻辑移动到单个回调函数中

<button
  onClick={() => {
    if (!isRecording) {
      modalPortal.current.open();
      beginRecording();
    } else {
      endRecording();
    }
  }
>
  ...
</button>

试试这个：

const handleButtonClick = () => {
  if (isRecording) {
    endRecording()
    return
  }

  modalPortal.current.open()
  beginRecording()
}


<button onClick={handleButtonClick} />

const handleButtonClick=（）=>{
如果（isRecording）{
endRecording（）
返回
}
modalPortal.current.open（）
开始记录（）
}

试试这个：

const handleButtonClick = () => {
  if (isRecording) {
    endRecording()
    return
  }

  modalPortal.current.open()
  beginRecording()
}


<button onClick={handleButtonClick} />

const handleButtonClick=（）=>{
如果（isRecording）{
endRecording（）
返回
}
modalPortal.current.open（）
开始记录（）
}
如果要使用第二种语法，请使用
beginRecording（）
和
endRecording（）
。您不能像那样混合和匹配函数调用和函数引用。或者，只需要一个封装三元的函数，并停止在视图中执行条件逻辑。您只需要执行
onClick={（）=>doManyThings（）}
@Yadab-尝试过-不，确实缺少括号。我还不明白为什么在一个上下文中删除它们并在另一个上下文中神秘地停止编译器在语法上是有效的。函数名只是对该函数的引用，即
domanyings
，当您添加括号时，
domanyings（）
，您正在调用该函数
onClick={domanyings}
几乎等同于
onClick={（）=>domanyings（）}
。在React中的许多情况下，您会看到由于以下几个原因而放弃参数：（1）onClick回调不关心click事件，（2）回调不需要传递任何参数。如果要使用第二种语法，请使用
beginRecording（）
和
endRecording（）
。您不能像那样混合和匹配函数调用和函数引用。或者，只需要一个封装三元的函数，并停止在视图中执行条件逻辑。您只需要执行
onClick={（）=>doManyThings（）}
@Yadab-尝试过-不，确实缺少括号。我还不明白为什么在一个上下文中删除它们并在另一个上下文中神秘地停止编译器在语法上是有效的。函数名只是对该函数的引用，即
domanyings
，当您添加括号时，
domanyings（）
，您正在调用该函数
onClick={domanyings}
几乎等同于
onClick={（）=>domanyings（）}
。在React中的许多情况下，您会看到由于以下原因而放弃参数：（1）onClick回调不关心click事件，（2）回调不需要传递任何参数。Drew，我可以吻你。在过去的两个小时里，我差点把我的笔记本电脑扔出窗外。这个投票结果很好的答案（这意味着只能使用三元组）是非常误导的：啊，感谢编辑为答案添加了更多的上下文。我感到恼火的是，我提出的尝试中成功与失败之间的区别实际上是添加到函数调用中的括号。只需在
beginRecording（）
中添加括号即可解决问题。@lys有趣的是，另一个答案似乎解决了linting警告/错误，但它似乎回答了另一个问题/问题。对我来说，提到ternaries似乎是事后诸葛亮，但不管怎样，如果您没有意识到每个案例隐式返回的内容仍然需要根据其自身的优点有效，我可以看出这可能会将您引入歧途。@lys是的，语法可能会很棘手（而且很重要！）。德鲁，我可以吻你。在过去的两个小时里，我差点把我的笔记本电脑扔出窗外。这个投票结果很好的答案（这意味着只能使用三元组）是非常误导的：啊，感谢编辑为答案添加了更多的上下文。我感到恼火的是，我提出的尝试中成功与失败之间的区别实际上是添加到函数调用中的括号。只需在
beginRecording（）
中添加括号即可解决问题。@lys有趣的是，另一个答案似乎解决了linting警告/错误，但它似乎回答了另一个问题/问题。对我来说，提到ternaries似乎是事后诸葛亮，但不管怎样，如果您没有意识到每个案例隐式返回的内容仍然需要根据其自身的优点有效，我可以看出这可能会将您引入歧途。@lys是的，语法可能会很棘手（而且很重要！）。