React单个按钮点击事件绑定多函数的三元运算符用法问题与解决

问题场景 #

想要复用单个Button组件实现多场景功能，核心需求是根据布尔变量openForAddUser切换点击逻辑：变量为true时触发添加用户操作，为false时触发更新操作。

调用Button的代码 #

<Button            
  handleClick={`${props.openForAddUser?handleAddUser():handleUpdate()}`}           
  buttonText={`${props.openForAddUser?"Add New User":"Update"}`}
/>


function handleAddUser(){
    alert("handle add new user");
}
function handleUpdate() {
   alert("handle update");
}

Button组件代码 #

const Button = (props) => {
  return (
    <>
      <span className="flex flex-col items-center justify-center">
        <button
          type="submit"
          className={props.className}
          onClick={props.handleClick} // 条件回调绑定位置
        >
          {props.buttonText}
        </button>
      </span>
    </>
  );
};

export default Button;

报错信息 #

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
    at getListener (react-dom.development.js:4054:1)
    at accumulateSinglePhaseListeners (react-dom.development.js:9317:1)
    at extractEvents$4 (react-dom.development.js:8976:1)
    at extractEvents$5 (react-dom.development.js:9004:1)
    at dispatchEventsForPlugins (react-dom.development.js:9096:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

问题原因 #

1. 使用反引号`${}`包裹条件表达式，会将函数调用结果转为字符串，而React的onClick要求绑定的是函数类型，而非字符串，因此触发类型错误。
2. 原代码中直接写handleAddUser()会导致组件渲染时就立即执行函数，而非点击按钮时才执行。

解决方法 #

直接传递函数引用给handleClick，移除反引号，且不立即调用函数：

<Button            
  handleClick={props.openForAddUser ? handleAddUser : handleUpdate}           
  buttonText={`${props.openForAddUser ? "添加新用户" : "更新"}`}
/>

这样onClick绑定的是函数本身，点击按钮时才会执行对应逻辑，同时满足条件切换的需求。

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