React无Hook场景下onClick带参调用函数及无效Hook调用报错解决

以下是我编写的React网格组件代码：

import Gameplay from "./gameplay";

function Grid() {
  const rows = 8;
  const cols = 6;
  const grid = [];

  for (let row = 0; row < rows; row++) {
    const currentRow = [];
    for (let col = 0; col < cols; col++) {
      const ID = col + row * 6 + 1;
      currentRow.push(
        <span
          key={`${row}-${col}`}
          className="cell"
          onClick={() => Gameplay({ ID })}
        >
          {ID}
        </span>
      );
    }
    grid.push(
      <div key={row} className="row">
        {currentRow}
      </div>
    );
  }

  return <div className="grid">{grid}</div>;
}

我希望点击每个方块时触发带ID参数的Gameplay函数，但遇到了问题：

• 使用onClick={() => Gameplay({ ID })}时，出现错误：Invalid hook call. Hooks can only be called inside of the body of a function component.
• 使用onClick={(ID) => Gameplay}无任何响应
• 使用onClick={Gameplay(ID)}会直接执行函数返回对象，而非触发点击事件

请问如何实现点击方块时触发Gameplay函数？

错误原因 #

报错信息说明Gameplay是一个React自定义Hook（内部使用了useState/useEffect等Hook），而React Hook的规则明确要求：必须在函数组件的顶层作用域调用，不能在嵌套函数、循环、条件判断中调用，你在点击回调这个嵌套函数里调用Hook，违反了这条规则，所以触发报错。

分两种情况解决 #

情况1：Gameplay不需要作为Hook使用

如果Gameplay只是处理点击逻辑的普通函数（不依赖任何React Hook），直接修改它为普通函数即可：

// gameplay.js
export default function Gameplay({ ID }) {
  // 这里写你的点击处理逻辑
  console.log("点击的方块ID：", ID);
  // 其他业务操作，比如更新数据、发送请求等
}

此时Grid组件中的onClick={() => Gameplay({ ID })}就能正常工作，点击方块会触发函数并传入ID参数。

情况2：Gameplay必须作为Hook使用

如果Gameplay内部依赖React Hook（比如需要管理状态、监听副作用），需要调整结构，把Hook调用移到组件顶层，再通过返回的函数处理点击：

首先改造Gameplay为标准的自定义Hook（命名建议以use开头，符合React规范）：

// gameplay.js
import { useState } from 'react';

export default function useGameplay() {
  // 这里可以正常使用React Hook
  const [clickedId, setClickedId] = useState(null);

  // 定义处理点击的函数
  const handleCellClick = (ID) => {
    setClickedId(ID);
    // 这里添加点击后的业务逻辑
    console.log("当前点击的ID：", ID);
  };

  // 返回处理函数和需要的状态
  return { handleCellClick, clickedId };
}

然后修改Grid组件，在顶层调用Hook，点击时调用返回的处理函数：

import useGameplay from "./gameplay";

function Grid() {
  // 在组件顶层调用自定义Hook
  const { handleCellClick } = useGameplay();
  
  const rows = 8;
  const cols = 6;
  const grid = [];

  for (let row = 0; row < rows; row++) {
    const currentRow = [];
    for (let col = 0; col < cols; col++) {
      const ID = col + row * 6 + 1;
      currentRow.push(
        <span
          key={`${row}-${col}`}
          className="cell"
          onClick={() => handleCellClick(ID)} // 调用Hook返回的处理函数
        >
          {ID}
        </span>
      );
    }
    grid.push(
      <div key={row} className="row">
        {currentRow}
      </div>
    );
  }

  return <div className="grid">{grid}</div>;
}

这样既符合React Hook的规则，又能实现点击方块时传入ID并触发逻辑的需求。

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