Javascript Pure reactJS：由于浮动，生命游戏规则显示错误：左侧网格建筑与2d阵列不对应

我正在旅行，玩着我建立在纯JS基础上的生活游戏。我让用户点击一个按钮来选择网格的大小，但问题是位置没有正确着色，因为它没有与跟踪单元格状态（活动或不活动）的数组同步。网格像普通数组一样渲染，然后使用float:left和特定宽度（取决于单元大小）显示为网格

这是密码笔。您必须输入点，然后按开始键一次（我停用了循环，因为它不能正常工作，所以它只能通过一次生成。代码如下：

class Header extends React.Component {

  render(){
  return ( <h1 className="title text-center">The Game Of Life</h1>);
  }
}


class Cell extends React.Component {

  toggleState(){
   const i=this.props.row;
   const j=this.props.column;  
   this.props.changeCellHandler(i,j);
  }

  render(){

    var style="cell";
    if(this.props.alive){
      style+=" alive";
    }




  return ( <div className={style} id={this.props.id} onClick={this.toggleState.bind(this)}></div>);
  }
}


class Board extends React.Component {

  constructor(props) {
  super(props);
  this.state = {lifeStateMatrix:[],boardWidth:50,boardHeight:30,simulationIsRunning:false, generationNumber: 0};
  this.timer;
   }

  componentWillMount(){
    this.setBoardSizeAndStatusMatrix(70,50);
  }



  //add all the neighbours of a position to an Array to check later how many neighbours the position has
 applyLifeRules(i,j){

    const minX=0, minY=0,maxX=this.state.boardWidth,maxY=this.state.boardHeight;
    let totalLiveNeighbours=0;
     let currentStatusMatrix=this.state.lifeStateMatrix;
  //check for limits  
  const left= i-1>=minX;
  const topLeft= i-1 >=minX && j+1<maxY;   
  const topMiddle= j+1<maxY;
  const topRight= i+1<maxX && j+1<maxY;  
  const right=i+1<maxX;
  const bottomRight= i+1<maxX && j-1>=minY;
  const bottomMiddle= j-1>=minY;
  const bottomLeft= i-1>=minX && j-1>=minY;


    if(left){
       if(currentStatusMatrix[i-1][j]){

       totalLiveNeighbours+=1;
     }
    }

    if(topLeft){
     if(currentStatusMatrix[i-1][j+1]){

       totalLiveNeighbours+=1;
     }
    }

    if(topMiddle){
       if(currentStatusMatrix[i][j+1]){

       totalLiveNeighbours+=1;
     }
    }

    if(topRight){
       if(currentStatusMatrix[i+1][j+1]){

        totalLiveNeighbours+=1;
     }
    }

    if(right){
      if(currentStatusMatrix[i+1][j]){
       totalLiveNeighbours+=1;
     }
    }

    if(bottomRight){
      if(currentStatusMatrix[i+1][j-1]){
       totalLiveNeighbours+=1;
     }
    }

    if(bottomMiddle){
            if(currentStatusMatrix[i][j-1]){

       totalLiveNeighbours+=1;
     }
    }

    if(bottomLeft){
       if(currentStatusMatrix[i-1][j-1]){

       totalLiveNeighbours+=1;
     }
    }


   if(totalLiveNeighbours>0 && i==0 && j==0){
  console.log('totalNeib',totalLiveNeighbours,"left",left,"topLeft",topLeft,"topMiddle",topMiddle,"topRight",topRight,"right",right,"bottomright",bottomRight,"bottomMiddle",bottomMiddle,"bottomLeft",bottomLeft);
   }
   if(i===1 && j===0){
     console.log(totalLiveNeighbours);
   }

    if(currentStatusMatrix[i][j] && totalLiveNeighbours < 2){
      //underpopulation. cell dies
      return false;
    }else if(currentStatusMatrix[i][j] && totalLiveNeighbours>3){
      //overpopulation. cell dies
      return false;

    }else if(currentStatusMatrix[i][j] && currentStatusMatrix[i][j]>=2 && currentStatusMatrix[i][j]<=3){
      return true;
    }else if(!currentStatusMatrix[i][j] && totalLiveNeighbours===3){
      //a new cell is born
      return true;
    }else{
      return false
    }


 }

  changeCell(i,j){
    //put the cell as alive and add the pairs that have the cell as the neighbour if the simulation is not running

    let newArray=this.state.lifeStateMatrix;
    newArray[i][j]= !this.state.lifeStateMatrix[i][j];
    this.setState({ lifeStateMatrix: newArray});     

  }



  moveToNextGeneration(){

    let nextGenMatrix=[]
    for(let i=0,maxX=this.state.boardWidth; i<maxX ;i++){
         let nextGenRow=[];
      for(let j=0,maxY=this.state.boardHeight; j<maxY;j++){
        nextGenRow.push(this.applyLifeRules(i,j));
      }
      nextGenMatrix.push(nextGenRow);      
    }
    const genNumber= this.state.generationNumber+1;
       this.setState({ lifeStateMatrix: nextGenMatrix, generationNumber:genNumber});  

    /*if(this.state.simulationIsRunning){
      this.moveToNextGeneration();
    }else{
      console.log("game stopped");
    }*/

  if(this.state.simulationIsRunning){  
    this.start();
  }

  }

  setBoardSizeAndStatusMatrix(x,y){

    let lifeStateMatrix=[];

     for(let i=0,len=x;i<len;i++){


      let rowStatus=[];


      for(let j=0,len=y;j<len;j++){

         rowStatus.push(false);                  

      }

      lifeStateMatrix.push(rowStatus);
    }


        this.setState({ lifeStateMatrix: lifeStateMatrix, boardWidth: x, boardHeight: y}); 

  }

  start(firstTime=false){
        this.setState({ simulationIsRunning:true});
       this.moveToNextGeneration();
  /*  const that=this;
    if(firstTime){
      console.log("hola");
     that.setState({ simulationIsRunning:true},that.moveToNextGeneration);
    }

 if(this.state.simulationIsRunning){     
    this.timer=setInterval(function next() {

    that.moveToNextGeneration(); 

        }, 2000);

 }else{
   console.log("tiene que terminar");
       clearTimeout(this.timer);
 }*/


  }

  pause(){
    console.log("pausa");
    this.setState({ simulationIsRunning:false}); 

  }

  clear(x,y){


    this.setState({simulationIsRunning:false,lifeStateMatrix: [], generationNumber: 0});
    this.setBoardSizeAndStatusMatrix(x,y);

  }

  render(){

    let generatedId=0, cellsRenderMatrix=[], x= this.state.boardWidth, y= this.state.boardHeight;
    let clickableState;


    for(let i=0,len=x;i<len;i++){

      let  rowRender=[];

      for(let j=0,len=y;j<len;j++){

                 rowRender.push(<Cell id={generatedId}  
           changeCellHandler={this.changeCell.bind(this)} row={i} column={j}
     alive={this.state.lifeStateMatrix[i][j]} height={x} />);                                                                     generatedId++;
      }
      cellsRenderMatrix.push(rowRender);
    }



  return (
    <div className="holder well">
    <Header />
      <div className="topButtons">
         <button className="run btn gridPicker" onClick={this.start.bind(this,true)}>Run</button>
          <button className="pause btn gridPicker" onClick={this.pause.bind(this)}>Pause</button>
            <button className="clear btn gridPicker" onClick={this.clear.bind(this,x,y)}>Clear</button> 
           <span id="generation">Generation: {this.state.generationNumber}</span>
      </div>
    <div className="board" style={{width: (y*10)+"px"}}>

      {cellsRenderMatrix}
    </div>
      <div className="bottomButtons">
            <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,50,30)}>50x30</button>
          <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,70,50)}>70x50</button>
            <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,100,80)}>100x80</button>
      </div>
      </div>);
  }

}



ReactDOM.render(
  <Board />,
  document.getElementById('container')
);

class Header extends React.Component {

  render(){
  return ( <h1 className="title text-center">The Game Of Life</h1>);
  }
}


class Cell extends React.Component {

  toggleState(){
   const i=this.props.row;
   const j=this.props.column;  
   this.props.changeCellHandler(i,j);
  }

  render(){

    var style="cell";
    if(this.props.alive){
      style+=" alive";
    }




  return ( <div className={style} id={this.props.id} onClick={this.toggleState.bind(this)}></div>);
  }
}


class Board extends React.Component {

  constructor(props) {
  super(props);
  this.state = {lifeStateMatrix:[],boardWidth:50,boardHeight:30,simulationIsRunning:false, generationNumber: 0};
  this.timer;
   }

  componentWillMount(){
    this.setBoardSizeAndStatusMatrix(70,50);
  }



  //add all the neighbours of a position to an Array to check later how many neighbours the position has
 applyLifeRules(i,j){

    const minX=0, minY=0,maxX=this.state.boardWidth,maxY=this.state.boardHeight;
    let totalLiveNeighbours=0;
     let currentStatusMatrix=this.state.lifeStateMatrix;
  //check for limits  
  const left= i-1>=minX;
  const topLeft= i-1 >=minX && j+1<maxY;   
  const topMiddle= j+1<maxY;
  const topRight= i+1<maxX && j+1<maxY;  
  const right=i+1<maxX;
  const bottomRight= i+1<maxX && j-1>=minY;
  const bottomMiddle= j-1>=minY;
  const bottomLeft= i-1>=minX && j-1>=minY;


    if(left){
       if(currentStatusMatrix[i-1][j]){

       totalLiveNeighbours+=1;
     }
    }

    if(topLeft){
     if(currentStatusMatrix[i-1][j+1]){

       totalLiveNeighbours+=1;
     }
    }

    if(topMiddle){
       if(currentStatusMatrix[i][j+1]){

       totalLiveNeighbours+=1;
     }
    }

    if(topRight){
       if(currentStatusMatrix[i+1][j+1]){

        totalLiveNeighbours+=1;
     }
    }

    if(right){
      if(currentStatusMatrix[i+1][j]){
       totalLiveNeighbours+=1;
     }
    }

    if(bottomRight){
      if(currentStatusMatrix[i+1][j-1]){
       totalLiveNeighbours+=1;
     }
    }

    if(bottomMiddle){
            if(currentStatusMatrix[i][j-1]){

       totalLiveNeighbours+=1;
     }
    }

    if(bottomLeft){
       if(currentStatusMatrix[i-1][j-1]){

       totalLiveNeighbours+=1;
     }
    }


   if(totalLiveNeighbours>0 && i==0 && j==0){
  console.log('totalNeib',totalLiveNeighbours,"left",left,"topLeft",topLeft,"topMiddle",topMiddle,"topRight",topRight,"right",right,"bottomright",bottomRight,"bottomMiddle",bottomMiddle,"bottomLeft",bottomLeft);
   }
   if(i===1 && j===0){
     console.log(totalLiveNeighbours);
   }

    if(currentStatusMatrix[i][j] && totalLiveNeighbours < 2){
      //underpopulation. cell dies
      return false;
    }else if(currentStatusMatrix[i][j] && totalLiveNeighbours>3){
      //overpopulation. cell dies
      return false;

    }else if(currentStatusMatrix[i][j] && currentStatusMatrix[i][j]>=2 && currentStatusMatrix[i][j]<=3){
      return true;
    }else if(!currentStatusMatrix[i][j] && totalLiveNeighbours===3){
      //a new cell is born
      return true;
    }else{
      return false
    }


 }

  changeCell(i,j){
    //put the cell as alive and add the pairs that have the cell as the neighbour if the simulation is not running

    let newArray=this.state.lifeStateMatrix;
    newArray[i][j]= !this.state.lifeStateMatrix[i][j];
    this.setState({ lifeStateMatrix: newArray});     

  }



  moveToNextGeneration(){

    let nextGenMatrix=[]
    for(let i=0,maxX=this.state.boardWidth; i<maxX ;i++){
         let nextGenRow=[];
      for(let j=0,maxY=this.state.boardHeight; j<maxY;j++){
        nextGenRow.push(this.applyLifeRules(i,j));
      }
      nextGenMatrix.push(nextGenRow);      
    }
    const genNumber= this.state.generationNumber+1;
       this.setState({ lifeStateMatrix: nextGenMatrix, generationNumber:genNumber});  

    /*if(this.state.simulationIsRunning){
      this.moveToNextGeneration();
    }else{
      console.log("game stopped");
    }*/

  if(this.state.simulationIsRunning){  
    this.start();
  }

  }

  setBoardSizeAndStatusMatrix(x,y){

    let lifeStateMatrix=[];

     for(let i=0,len=x;i<len;i++){


      let rowStatus=[];


      for(let j=0,len=y;j<len;j++){

         rowStatus.push(false);                  

      }

      lifeStateMatrix.push(rowStatus);
    }


        this.setState({ lifeStateMatrix: lifeStateMatrix, boardWidth: x, boardHeight: y}); 

  }

  start(firstTime=false){
        this.setState({ simulationIsRunning:true});
       this.moveToNextGeneration();
  /*  const that=this;
    if(firstTime){
      console.log("hola");
     that.setState({ simulationIsRunning:true},that.moveToNextGeneration);
    }

 if(this.state.simulationIsRunning){     
    this.timer=setInterval(function next() {

    that.moveToNextGeneration(); 

        }, 2000);

 }else{
   console.log("tiene que terminar");
       clearTimeout(this.timer);
 }*/


  }

  pause(){
    console.log("pausa");
    this.setState({ simulationIsRunning:false}); 

  }

  clear(x,y){


    this.setState({simulationIsRunning:false,lifeStateMatrix: [], generationNumber: 0});
    this.setBoardSizeAndStatusMatrix(x,y);

  }

  render(){

    let generatedId=0, cellsRenderMatrix=[], x= this.state.boardWidth, y= this.state.boardHeight;
    let clickableState;


    for(let i=0,len=x;i<len;i++){

      let  rowRender=[];

      for(let j=0,len=y;j<len;j++){

                 rowRender.push(<Cell id={generatedId}  
           changeCellHandler={this.changeCell.bind(this)} row={i} column={j}
     alive={this.state.lifeStateMatrix[i][j]} height={x} />);                                                                     generatedId++;
      }
      cellsRenderMatrix.push(rowRender);
    }



  return (
    <div className="holder well">
    <Header />
      <div className="topButtons">
         <button className="run btn gridPicker" onClick={this.start.bind(this,true)}>Run</button>
          <button className="pause btn gridPicker" onClick={this.pause.bind(this)}>Pause</button>
            <button className="clear btn gridPicker" onClick={this.clear.bind(this,x,y)}>Clear</button> 
           <span id="generation">Generation: {this.state.generationNumber}</span>
      </div>
    <div className="board" style={{width: (y*10)+"px"}}>

      {cellsRenderMatrix}
    </div>
      <div className="bottomButtons">
            <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,50,30)}>50x30</button>
          <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,70,50)}>70x50</button>
            <button className="fiftyThirty btn gridPicker" onClick={this.setBoardSizeAndStatusMatrix.bind(this,100,80)}>100x80</button>
      </div>
      </div>);
  }

}



ReactDOM.render(
  <Board />,
  document.getElementById('container')
);

类头扩展React.Component{
render（）{
回归（生命的游戏）；
}
}
类单元格扩展了React.Component{
切换状态（）{
const i=this.props.row；
const j=this.props.column；
this.props.changeCellHandler（i，j）；
}
render（）{
var style=“cell”；
如果（这个。道具。活着）{
样式+=“活动”；
}
返回（）；
}
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={lifeStateMatrix:[]，boardWidth:50，boardHeight:30，SimulationRunning:false，generationNumber:0}；
这个计时器；
}
组件willmount（）{
此.setBoardSizeAndStatus矩阵（70,50）；
}
//将一个位置的所有邻居添加到一个数组中，以便稍后检查该位置有多少邻居
applyLifeRules（i，j）{
const minX=0，minY=0，maxX=this.state.boardWidth，maxY=this.state.boardHeight；
设total=0；
让currentStatusMatrix=this.state.lifeStateMatrix；
//检查限制
常数left=i-1>=minX；
常量左上角=i-1>=minX&&j+13）{
//人口过剩，细胞死亡
返回false；
}否则，如果（currentStatusMatrix[i][j]&¤tStatusMatrix[i][j]>=2&¤tStatusMatrix[i][j]我找到了解决方案。而不是

else if(currentStatusMatrix[i][j] && currentStatusMatrix[i][j]>=2 && currentStatusMatrix[i][j]<=3){
      return true;

it was  else if(currentStatusMatrix[i][j] && totalLiveNeighbours>=2 && totalLiveNeighbours<=3){
      return true;

else如果（currentStatusMatrix[i][j]&¤tStatusMatrix[i][j]>=2&¤tStatusMatrix[i][j]=2&&TotaliveNeights=minX；
常量左上角=i-1>=minX&&j+13）{
//人口过剩，细胞死亡
返回false；
}否则，如果（currentStatusMatrix[i][j]&¤tStatusMatrix[i][j]>=2&¤tStatusMatrix[i][j]我找到了解决方案。而不是

else if(currentStatusMatrix[i][j] && currentStatusMatrix[i][j]>=2 && currentStatusMatrix[i][j]<=3){
      return true;

it was  else if(currentStatusMatrix[i][j] && totalLiveNeighbours>=2 && totalLiveNeighbours<=3){
      return true;

else如果（currentStatusMatrix[i][j]&¤tStatusMatrix[i][j]>=2&¤tStatusMatrix[i][j]=2&&TotaliveNeights=minX；
常量左上角=i-1>=minX&&j+13）{
//人口过剩，细胞死亡
返回false；
}如果（currentStatusMatrix[i][j]&¤tStatusMatrix[i][j]>=2&¤tStatusMatrix[i][j]