切换具有状态依赖性的组件

时间:2019-03-22 15:44:04

标签: reactjs toggle react-props

我正在尝试创建一个菜单来分别选择游戏级别和创建棋盘游戏。

每当我单击“轻松”按钮(或其他任何按钮,尚未实现其他按钮)时,应用程序崩溃。

我猜想这与状态中的行和列属性中的MemGame组件的依赖性有关,但是我想不出一种消除此依赖性的方法,是否有解决此问题的方法? 还是您会建议如何不同?

谢谢

state = { 
    rows: 0,
    columns: 0,
    levelMenu: true
 }
render() { 
    return ( 
        <div>
        {this.state.levelMenu?
        <div>
            <Button onClick={()=>this.handleLevelClick(1)}>Easy</Button>
            <Button onClick={()=>this.handleLevelClick(2)}>Medium</Button>
            <Button onClick={()=>this.handleLevelClick(3)}>Hard</Button>
            <Button onClick={()=>this.handleLevelClick(4)}>VeryHard</Button>
        </div>
        :
        <MemGame rows={this.state.rows} columns={this.state.columns} />}
        </div>
     );
}

handleLevelClick(level){
    if(level===1){
        this.setState({rows:2,columns:2});
    }
    .......
 this.toggleMenu()
}

toggleMenu(){
    this.setState({levelMenu: !this.state.levelMenu});
}

最后的行和列进入其他组件的状态

class Board extends Component {   
state={
    board: this.initialBoard(this.props.rows,this.props.columns),
    numOfOpenCards: 0,
    lastId: "",
    matchCounter:0,
    clickCount: 0, 
    isFinished: false,
    firstClick: false,
    resetRequest: false    
}



 initialBoard(rows,columns){
    let board=[];
    const imageData = this.chooseImages(rows,columns);
    const boardSize = rows*columns;
    for(let index=0;index<boardSize;index++){
        board[index]={
            id: uuid.v4(),
            imgUrl: imageData[index],
            faceUp: false,
            paired: false
        };
    }
    return board;
}

0 个答案:

没有答案