如何重写onClick事件？代码不渲染且onClick条件报错处理

首先你这段代码的直接错误是onClick的语法写错了，应该写成onClick={...}（少了个等号），补上后语法上就能正常运行，但嵌套多层的三元表达式可读性极差，后续维护也麻烦，下面给你几种更合理的重写方式：

方式1：修复语法并优化三元表达式格式 #

先补上onClick的等号，再把三元的格式调整得更清晰，至少能让逻辑一目了然：

<ButtonContainer>
  {btnValues.map((btn, i) => (
    <Button
      key={i}
      value={btn}
      className={btn === '=' ? 'equals' : ''}
      onClick={
        btn === 'C' ? resetClickHandler :
        btn === "+-" ? invertClickHandler :
        btn === "%" ? percentClickHandler :
        btn === "=" ? equalsClickHandler :
        btn === "/" || btn === "X" || btn === "-" || btn === "+" ? signClickHandler :
        btn === "." ? commaClickHandler :
        numClickHandler
      }
    />
  ))}
</ButtonContainer>

方式2：用对象映射处理（推荐） #

把按钮值和对应的处理函数做成键值对的映射，代码更简洁，后续新增按钮逻辑也更方便：

// 先定义映射关系
const handlerMap = {
  'C': resetClickHandler,
  '+-': invertClickHandler,
  '%': percentClickHandler,
  '=': equalsClickHandler,
  '/': signClickHandler,
  'X': signClickHandler,
  '-': signClickHandler,
  '+': signClickHandler,
  '.': commaClickHandler
};

// 渲染部分
<ButtonContainer>
  {btnValues.map((btn, i) => (
    <Button
      key={i}
      value={btn}
      className={btn === '=' ? 'equals' : ''}
      onClick={handlerMap[btn] || numClickHandler}
    />
  ))}
</ButtonContainer>

这里handlerMap[btn] || numClickHandler的意思是：如果btn在映射里找不到对应函数，就默认用numClickHandler（也就是数字按钮的处理逻辑）。

方式3：抽成单独的判断函数 #

把判断逻辑抽成一个独立函数，让渲染部分的代码更干净：

const getButtonHandler = (btn) => {
  switch(btn) {
    case 'C':
      return resetClickHandler;
    case '+-':
      return invertClickHandler;
    case '%':
      return percentClickHandler;
    case '=':
      return equalsClickHandler;
    case '/':
    case 'X':
    case '-':
    case '+':
      return signClickHandler;
    case '.':
      return commaClickHandler;
    default:
      return numClickHandler;
  }
};

// 渲染部分
<ButtonContainer>
  {btnValues.map((btn, i) => (
    <Button
      key={i}
      value={btn}
      className={btn === '=' ? 'equals' : ''}
      onClick={getButtonHandler(btn)}
    />
  ))}
</ButtonContainer>

用switch-case比多层三元更直观，逻辑分支清晰，也更容易调试。

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