使用React Hooks实现父函数向子函数传递Props

你的代码里有几个核心问题导致变量无法识别，逐个修正如下：

1. 混淆自定义Hook与React组件 #

useSquare 返回JSX元素，这不符合React Hook的规则（Hook用于提取复用状态逻辑，不能直接返回UI），它应该是一个React组件，命名改成Square（组件首字母大写是React的强制规范）。

2. onClick事件绑定错误 #

你把函数调用写成了组件标签形式，这是完全错误的。onClick需要接收一个函数，而非JSX元素，同时要处理player的传递与点击逻辑。

3. 未定义setGetplayer #

代码里的setGetplayer没有对应的useState定义，需要在父组件中补充。

修正后的完整代码 #

import { useState } from 'react';

// 修正为React组件，首字母大写
const Square = ({ squareState, setSquareState, player, setGetPlayer }) => {
  // 组件内部定义点击处理函数，直接使用传入的props
  const handleSquareClick = () => {
    setSquareState(player);
    setGetPlayer(true);
  };

  return (
    <button className="square" onClick={handleSquareClick}>
      {squareState}
    </button>
  );
};

const Board = ({ player }) => {
  const status = `Next Player : ${player}`;
  const [square1State, setSquare1State] = useState(1);
  // 补充缺失的setGetPlayer对应的state
  const [getPlayer, setGetPlayer] = useState(false);

  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square
          squareState={square1State}
          setSquareState={setSquare1State}
          player={player}
          setGetPlayer={setGetPlayer}
        />
      </div>
    </div>
  );
};

关键修正点说明 #

• 组件命名：Square首字母大写，符合React组件命名规范，避免被误判为普通函数或Hook。
• 事件绑定：onClick={handleSquareClick}直接传递函数引用，替代错误的JSX写法。
• Props传递：将player和setGetPlayer作为Props传给子组件，确保函数能访问所需变量。
• 状态定义：在Board组件中补充getPlayer的状态定义，修复setGetplayer未定义的问题。

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