React条件式onClick事件：多函数处理是否为通用实践？

问题描述 #

我正在开发战舰游戏，点击Tile组件时需根据currentGameState执行不同逻辑：处于“picking boat”状态时，玩家点击己方Tile放置船部件；其他状态下，玩家点击Tile攻击敌方区域。当前我通过条件判断为onClick绑定不同处理函数，想请教这种多函数处理同一事件的方式是否属于通用实践，还是将所有点击逻辑整合到单个函数中更常见？

附代码：

const handleClick = (e) => {
    // player sets boat part by clicking on his own tile
    handleClickedTile(e.target);
    console.log(currentGameState)
}

const handleInGameClick = (e) => {
    // player makes attack by clicking on enemies tile
    console.log(currentGameState)
}


<div className="tile" id={coordinate} onClick={currentGameState === "picking boat" ? handleClick : handleInGameClick}>
    <div className="tile-circle"></div>
</div>

解答 #

两种方式都是前端开发中的常见实践，各有适用场景：

1. 拆分多个函数（你当前的写法） #

这种方式的优势很突出：

• 逻辑拆分清晰，每个函数只负责单一状态下的操作，职责明确，后续维护时能快速定位对应逻辑
• 函数命名直观，从handleClick（放置船部件）、handleInGameClick（攻击）的名字就能直接理解作用，可读性强
• 后续扩展某一种状态的逻辑时，直接修改对应函数即可，不会影响另一种状态的代码

需要注意：如果后续游戏状态增多（比如新增“战绩查看”“重新部署”等状态），onClick中的三元判断会变成多层嵌套的条件表达式，可读性会随之下降。

2. 整合到单个函数 #

如果后续状态可能较多，或者两种逻辑存在复用代码，整合到单个函数会更合适：

const handleTileClick = (e) => {
    console.log(currentGameState);
    if (currentGameState === "picking boat") {
        handleClickedTile(e.target);
    } else {
        // 执行攻击逻辑
    }
}

// 组件中绑定
<div className="tile" id={coordinate} onClick={handleTileClick}>
    <div className="tile-circle"></div>
</div>

这种写法的好处：

• 所有点击逻辑集中在一处，便于统一管理事件触发的前置/后置操作（比如统一添加日志、统一处理事件对象）
• 状态判断集中，后续新增状态时，直接在函数内添加else if即可，组件的onClick绑定无需修改，代码更简洁

总结 #

如果当前只有两种状态，你的写法完全没问题，属于通用的拆分式实践；如果未来状态会增加，或者存在逻辑复用需求，再考虑整合到单个函数中。两种方式没有绝对的优劣，核心是让代码保持可读性和可维护性。

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