javascript - 如何在父组件重新加载时阻止子组件重新渲染

Question

我有以下带有倒计时 npm 库的代码

import React, { Component } from 'react'
import { Panel, Button } from 'rsuite';
import Countdown from 'react-countdown-now';
export default class GamePlay extends Component {
    constructor(){
        super();
        this.state={
            select: false
        }
        this.onSelect = this.onSelect.bind(this);
    }
    onSelect(e){
        this.setState({ select: e.target.name });
    }
    render() {
        return (
            <div>
                <div className="col-6 offset-3">
                    <Panel className="text-center bg-white" header={<h3>Question</h3>} bordered>
                        <div className="d-flex align-items-center">
                            Time left: 
                            <Countdown date={Date.now() + 30000} />
                        </div>
                    </Panel>
                </div>
                <div className="mt-5">
                    <div className="d-flex align-items-center">
                        <div className="col-6">
                            <Button name="A" appearance={`${this.state.select === 'A' ? 'primary': 'default'}`} block onClick={this.onSelect} bordered>A</Button>
                            <Button name="C" appearance={`${this.state.select === 'C' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>C</Button>
                        </div>
                        <div className="col-6">
                            <Button name="B" appearance={`${this.state.select === 'B' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>B</Button>
                            <Button name="D" appearance={`${this.state.select === 'D' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>D</Button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

当我单击一个按钮以选择一个答案时，它会导致 GamePlay 组件重新呈现，因此倒计时会重新开始。

单击答案时如何阻止它重新启动？我真的很感激任何帮助。

标签： javascriptreactjs

Answer 1

您可以date在渲染函数之外定义属性值，以便在重新渲染父级时它不会改变。

这是一个例子：

constructor(){
  ....
  this.date = Date.now() + 30000;
}

render(){
  ....
  <Countdown date={this.date} />
  ....
}