javascript - React Game of Life 无声无息地失败了，我错过了什么？

Question

情况:

我目前正在学习 React。作为练习，我正在尝试编写康威的生命游戏代码:

https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life

规则如下:

• “任何少于两个活邻居的活细胞都会死亡，就像是由于 由于人口不足。

• 任何有两个或三个邻居的活细胞都会继续生存到下一个 一代人。

• 任何具有超过三个活邻居的活细胞都会死亡，就像
  人口过剩

• 任何具有恰好三个活邻居的死细胞都会成为活细胞， 就像通过繁殖一样。”

因此，我开始根据我在网上找到的教程和解释来编写一个框架，同时按照自己的方式进行编码。

我已经到了正常情况下细胞应该按预期表现的地步，但什么也没有发生:

我点击黑板创建一些单元格，按“开始”，它们没有自己的生命:/

它们不会死亡和繁殖，什么也不会发生。

没有任何错误可以指导我!

我可能做错了什么？

<小时/>

代码:

    var Game = createReactClass ({

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

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

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

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

    })

var Board = createReactClass ({

    getInitialState() {
        return {
            array: []
        }
    },

    render() {

        var rows = [];
        for (var y = 1; y <= 40; y++) {
            var cells = [];
            for (var x = 1; x <= 40; x++) {
                cells.push(<Cell start= {this.props.start} array={this.state.array} key={x + x*y} id = {x + x*y} />);
            }
            rows.push(<tr key={y}>{cells}</tr>);
        }
        return <table><tbody>{rows}</tbody></table>;

    }

})

var Cell = createReactClass ({

    getInitialState() {
        return {
            selected : false,
            dying: false
        }
    },

    isAlive(e) {
        return e.state.selected
    },

    componentDidMount() {

        this.props.array[this.props.id] = this;

        var life;
        var evolution;

        if(this.props.start) {
            life = setInterval(function(){ 
                this.life;
            }, 500);
            evolution = setInterval(function(){ 
                this.setState({
                    selected: !this.state.dying
                });
            }, 1000);
        } 
        else {
            clearInterval(life);
            clearInterval(evolution);
        }
    },

    life() {

        var array = this.props.array;

        var neighbours = 0;

        if (this.isAlive(array[this.props.id+1])) {
            neighbours++;
        }
        if (this.isAlive(array[this.props.id-1])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id-39])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id-40])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id-41])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id+41])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id+40])) {
            neighbours ++;
        }
        if (this.isAlive(array[this.props.id+39])) {
            neighbours ++;
        }

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

    handleClick() {
        this.setState({
            selected: !this.state.selected
        })
    },

    render() {
        return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>;
    }
})

ReactDOM.render(<Game />, document.getElementById('gameOfLife'));

Answer 1

componentDidMount仅在组件最初安装时触发。当 start 标志从 false 切换到 true 时，它不会再次触发来启动间隔。

您应该使用componentWillReceiveProps相反，每次 props 改变时都会触发。

注意:我不保证这将使您的游戏正常运行，只是间隔将开始运行，以便您可以继续调试您的工作。