无法获得React组件的道具价值

Question

我正在使用Tic-Tac-Toe应用程序，每次单击TD之后，我想插入并渲染X或O组件。一切正常，除非我尝试运行checkWinner功能。我从组件获取ID时遇到问题。该组件位于Matrix（二维数组）内部。 当我尝试控制台记录此数组字段时，这就是我得到的

这对我来说是新的，而且我从未见过这样的东西。我的目标是达到 id：“ x” 道具。

所以我试图这样做：

//Horizontal check
for(let i=0;i<values.length;i++){
  let xCount=0;
  let oCount=0;

  for(let j=0;j<values[i].length;j++){
    if(values[i][j].props.id === 'x'){
      xCount++;
    }

    if(values[i][j].props.id === 'o'){
      oCount++;
    }
  }

  if(xCount === 3){
    console.log('X wins!');
  }

  if(oCount === 3){
    console.log('O wins!');
  }
}

但是我得到 TypeError：无法读取未定义的属性'id'。我真的不知道为什么会这样。该ID对我来说很重要，因为正如您所看到的，取决于ID，计数正在增加。当您3岁时，玩家将获胜。

这是我在td点击以插入矩阵的方式

if(values[row][column] === " "){
  if(sign === true){
    newValue[row][column] = <X id="x"/> 
  }else{
    newValue[row][column] = <O id="x"/>
  }
}else{
  return;
}