基于React井字棋教程扩展：链表实现胜负判断遇未定义问题

核心问题：console.log输出undefined的原因 #

你在Game组件的render方法中给Board传递了log={console.log(this.props.value)}，但Game组件本身并没有接收value这个props，所以this.props.value必然是undefined，这就是第138行输出undefined的直接原因。

而且你要获取的是方块的编号（0-8），这个编号是在Board组件的renderSquare(i)方法中生成的，根本轮不到Game组件来获取。

获取方块编号的正确方式 #

要拿到每个方块的编号，需要在Board组件中将编号传递给Square，再在Square中使用：

1. 修改Board的renderSquare方法，给Square添加id props传递编号：

renderSquare(i) {
  return (
    <Square
      id={i} // 传递方块编号
      value={this.props.squares[i]}
      onClick={() => this.props.onClick(i)}
      // 那些暂时用不上的null props可以先删掉，避免冗余
    />
  );
}

2. 在Square组件中使用编号，比如打印：

function Square(props) {
  // 打印方块编号
  console.log('当前方块编号:', props.id);
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

3. 删除Game中错误的log props：
   从Board的props里删掉log = {console.log(this.props.value)}这一行，这是完全错误的用法。

关于链表胜负判断的补充建议 #

你想通过链表实现胜负判断，应该在Board组件中维护每个方块的邻接关系（比如上下左右、对角线的方块编号），而不是一开始给Square传一堆null的props。可以根据方块编号动态计算邻接方块：

• 上方方块：i >= 3 ? i - 3 : null
• 下方方块：i < 6 ? i + 3 : null
• 左方方块：i % 3 !== 0 ? i - 1 : null
• 右方方块：i % 3 !== 2 ? i + 1 : null
• 左上对角线：i >= 4 && i % 3 === 1 ? i - 4 : null（比如编号4的左上是0）
• 右下对角线：i < 5 && i % 3 === 1 ? i + 4 : null（比如编号4的右下是8）
• 右上对角线：i >= 2 && i % 3 === 0 ? i - 2 : null（比如编号2的右上是0）
• 左下对角线：i < 7 && i % 3 === 2 ? i + 2 : null（比如编号6的左下是8）

这样你可以在Board中构建每个方块的邻接链表，再基于这个链表实现胜负判断逻辑。

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