Question

错误：

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx

CODE：

Board.jsx

generateRandomBoard() { 
        for (var i = 0; i < this.state.cells.length ; i++) { 
           var currentAlive;
           if(Math.random() < 0.5) {
               currentAlive = false;
           } 
           else {
               currentAlive = true;
           }
           this.setState({
               cells[i].alive : currentAlive 
           })
        }
    },

问题：

如何为ife游戏生成随机起始位置？

我尝试了上面的代码，但它没有用。

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

完整代码：

游戏

var Game = createReactClass({

    getInitialState() {
        return {
            start: false
        }                    
    },

    handleStartClick() {
        this.setState({
            start: true
        })
    },

    handleStopClick() {
        this.setState({
            start: false
        })
    },

    render() {
        return (
            <div>
                <h1>React.js Game of Life</h1>
                <div className="buttons">
                    <button className="btn btn-danger" onClick={this.handleStopClick}>Stop</button>
                    <button className="btn btn-success" onClick={this.handleStartClick}>Start</button>
                </div>
                <Board start={this.state.start}/>
            </div>
        )
    }

});

板

var Board = createReactClass({

getInitialState() {
    var array = [];
    for (var i = 0; i < 400; i++) {
        array.push(<Cell key={i} id={i} cells={array} />);
    }

    return {
        cells: array ,
        started: false,
        generations: 0
    };            

    this.generateRandomBoard();
},

 generateRandomBoard() {
    for (var i = 0; i < this.state.cells.length ; i++) {
       var currentAlive;
       if(Math.random() < 0.5) {
           currentAlive = false;
       }
       else {
           currentAlive = true;
       }

      cells[i].setState({
         alive: currentAlive
      })
    }
},

componentWillReceiveProps(nextProps) {

    var evolution;

    if(nextProps.start && this.state.started == false) {

      let evolution = setInterval(() => {
        this.state.cells.forEach( cell => cell.life() );
        this.state.cells.forEach( cell => cell.nextLife() );
        this.setState({
            generations: this.state.generations + 1
        });
      }, 500);

      this.setState({
        started: true,
        evolution
      });
    }

    else {
      clearInterval(this.state.evolution);
      this.setState({
        started: false
      })
      if (nextProps.delete) {
          this.state.cells.forEach( cell => cell.setState({alive: false}));
          this.state.cells.forEach( cell => cell.setState({nextAlive: false}));
          nextProps.stopClear();
          this.setState({
            generations: 0
          });
      }
    }

},

render() {

    var that = this;

    return (
        <div>
            <div className="board">
                {
                    this.state.cells.map(function(item, i) {
                        return <Cell key={i} id={i} cells={that.state.cells} start={that.props.start}/>
                    })
                } 
            </div>
            <div className="generations">Generations: {this.state.generations}</div>
        </div>
    );
}

}）;

细胞

var Cell = createReactClass ({

getInitialState() {
    return {
        alive: false,
        nextAlive: false,
    }                      
},

isAlive(r, c){

    var size = Math.sqrt(this.props.cells.length)

    if (r == -1) {
        r = size - 1
    }
    if (r == size) {
        r = 0
    }
    if (c == -1) {
        c = size - 1
    }
    if (c == size) {
        c = 0
    }
    var id = r * size + c
    return this.props.cells[id].state.alive

},

life() {

    var neighbours = 0
    var size = Math.sqrt(this.props.cells.length)
    var row = Math.floor( this.props.id / size )
    var col = this.props.id - row * size 

    if (this.isAlive(row - 1, col)) {
        neighbours++
    }
    if (this.isAlive(row - 1, col + 1)) {
        neighbours++
    }
    if (this.isAlive(row - 1, col - 1)) {
        neighbours++
    }
    if (this.isAlive(row, col + 1)) {
        neighbours++
    }
    if (this.isAlive(row, col - 1)) {
        neighbours++
    }
    if (this.isAlive(row + 1, col)) {
        neighbours ++
    } 
    if (this.isAlive(row + 1, col + 1)) {
        neighbours ++
    }   
    if (this.isAlive(row + 1, col - 1))  {
        neighbours ++   
    }

    this.state.nextState = false 

    if (this.state.alive){
      if( neighbours < 2) {
          this.setState ({
             nextAlive: false 
          })
      }
      if (neighbours > 3) {
          this.setState ({
             nextAlive: false 
          })    
      }
      if (neighbours == 3 || neighbours == 2) {
          this.setState ({
             nextAlive: true 
          })
      }
    }
    else{
      if (neighbours == 3) {
          this.setState ({
             nextAlive: true 
          })   
      }
    }
},

nextLife () {
    this.setState({
        alive: this.state.nextAlive
    })     
},

componentDidMount() {
    this.props.cells[this.props.id] = this;
},

toggleLife() {
    this.setState({
        alive: !this.state.alive
    })
},

render() {
    return (
       <div className={this.state.alive ? "cell alive" : "cell"} onClick={this.toggleLife}></div>
    );
}

}）;

Answer 1

您似乎在generateRandomBoard()组件的Board函数中出现语法错误：

generateRandomBoard() {
  for (var i = 0; i < this.state.cells.length ; i++) {
    var currentAlive;
    if(Math.random() < 0.5) {
      currentAlive = false;
    }
    else {
       currentAlive = true;
    }

    // Buggy code from here ...
    //  this.setState({
    //      cells[i].alive : currentAlive
    //  })
    // ... to here

    // correct code from here ...
    cells[i].setState({
       alive: currentAlive
    })
    // ... to here
  }
}

Bellow是董事会的完整正确代码：

var Board = React.createClass({

    getInitialState() {
        var array = [];
        for (var i = 0; i < 400; i++) {
            array.push(<Cell key={i} id={i} cells={array} start={this.props.start} />);
        }

        return {
            cells: array
        };
    },

    generateRandomBoard() {
        for (var i = 0; i < this.state.cells.length ; i++) {
           var currentAlive;
           if(Math.random() < 0.5) {
               currentAlive = false;
           }
           else {
               currentAlive = true;
           }

          cells[i].setState({
             alive: currentAlive
          })
        }
    },

    render() {

        var that = this;

        return (
            <div className="board">
                {
                    this.state.cells.map(function(item, i) {
                        return <Cell key={i} id={i} cells={that.state.cells} start={that.props.start}/>
                    })
                }
            </div>
        );
    }

});

您报告的错误不是很清楚：

SyntaxError: pathToFiles/Board.jsx: Unexpected token, expected , (32:20) while parsing file: pathToFiles/Board.jsx

然而，(32:20)可能意味着第32行第20列。

也许您当前的环境不是最佳的。我个人使用Webpack（用于服务器端编译）和源映射（以便它告诉我错误的位置）：第一次配置需要几个小时，但一旦工作就很方便......

如何为生命游戏生成随机起始位置？

1 个答案: