Question

我试图在React中制作一个简单的彩色记忆游戏（找到有两个相同图像的地方）。

当我点击一张卡时，所有其他卡片都会重新渲染。我该如何防止这种情况？

//app class
handleClick = index => {
    this.setState((prevState) => {
        var temp = [...prevState.clickedPicture, index]
        return{clickedPicture: temp}   
    })
}

isClicked = (index) => this.state.clickedPicture.indexOf(index) === -1

render() {
    return(
        <div className="content">
            <div className="header">
                <h1>Memory</h1>
            </div>
            <div className="main">
 _.shuffle(this.state.colors).map((current,index) => 
                <Game
                    key={index}
                    index={index}
                    current={current}
                    status={this.state.status}
                    handleClick={this.handleClick}
                    bool={this.isClicked(index)} 
                />)
            </div>
}
// Game component

class Game extends Component {

clickHandle = () => {
    if(this.props.bool){
        this.props.handleClick(this.props.index)
    } 
}

render() {
    return(
      <div className={this.props.status}
      style={{ backgroundColor: this.props.bool  ? 
      'black' : this.props.current }}
      onClick={this.clickHandle}>
      </div>
        );
    }
}

Answer 1

使卡片成为他们自己的组件，以便他们可以访问生命周期钩子。然后使卡片成为PureComponents，因此只有在对道具的引用发生变化时才会更新。

如何重新渲染我点击的copmonent - 做出反应

1 个答案: