React中如何将函数作为Props传入子组件？井字棋代码问题咨询

核心问题及解决步骤： #

• 问题1：Props命名不匹配
  父组件给Case子组件传递的点击事件props是onClick，但子组件声明接收的参数是handleClick，两者命名不一致导致子组件无法获取到点击函数。

  解决方式：修改子组件的参数命名，贴合React组件的常规命名习惯：

  const Case = ({ value, onClick }) => {
    console.log(value)
    return (
      <button className='ttt-case' onClick={onClick}>
          { value }
       </button>
    )
  }
  

• 问题2：直接修改State数组导致界面不更新
  父组件的handleClick函数直接修改了cases数组的元素（cases[i] = isX ? 'X' : 'O'），这属于直接变更React状态，React无法检测到这种修改，因此组件不会重新渲染，界面内容不会更新。

  解决方式：创建原数组的副本，修改副本后再通过setCases更新状态：

  const handleClick = (i) => {
    // 创建数组副本，避免修改原state
    const newCases = [...cases];
    newCases[i] = isX ? 'X' : 'O';
    setCases(newCases);
    setIsX(!isX);
    console.log(newCases)
  }
  

• 额外优化：防止重复点击已填充格子
  可以在点击函数中增加判断，避免重复填充已有内容的格子：

  const handleClick = (i) => {
    if (cases[i] !== null) return; // 已填充则直接返回，不执行后续操作
    const newCases = [...cases];
    newCases[i] = isX ? 'X' : 'O';
    setCases(newCases);
    setIsX(!isX);
  }
  

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