时间戳

首页 > 解决方案 > 如何在一段时间后重新渲染组件

javascript - 如何在一段时间后重新渲染组件

问题描述

我有一个渲染另一个组件的组件，如果事件没有发生，我希望子组件在 2 秒后消失，并且父组件将使用不同的参数再次渲染它。

现在我对父组件做了什么-

export default class BlockManager extends React.Component {
  state = {
        curr_trial: 0
    }
    
  key_pressed=(trial_data)=>{
    //do something
    
    this.next_trial()
  }
  
  time_passed = ()=>{
    //do something
    
    this.next_trial()
  }
  
  next_trial = ()=>{
    this.setState(() => ({ curr_trial: this.state.curr_trial + 1 })
            );
  }
  
  render() {
         return (
            <div>
                <Trial
                  color= {this.colors_combination[this.state.curr_trial]}
                  time_passed = {this.time_passed}
                />
            </div>
        )
    }
}

和孩子——

export default class Trial extends React.Component {

    get_input = (keyboard) => {
        let trial_data = {
            key: keyboard.key
        }

        this.props.keyboard_pressed(trial_data)
    }
    
    get_image= ()=>{
    //do something
    
    }
    
    render() {
        return (
            <div
                onKeyDown={this.get_input}
                tabIndex="0">
                {this.get_image(this.props.color)}
            </div>
        )
    }

    componentDidMount() {
        document.addEventListener("keydown", this.get_input, false);
        setTimeout(this.props.time_passed, 2000);
    }

    componentWillUnmount() {
        document.removeEventListener("keydown", this.get_input, false);
    }
}

但它只进行一次。如果你能帮我找到一种方法，如果 2 秒后没有按下任何键，那么我会很高兴，然后调用父级的 time_passed 函数

标签： javascriptreactjssettimeout

解决方案

我认为您可以show在父组件中定义一个状态，该状态指示是否应渲染子组件。或者您可以使用 show 设置display: none子样式。

return (
            <div>
                {show && <Trial
                  color= {this.colors_combination[this.state.curr_trial]}
                  time_passed = {this.time_passed}
                />}
            </div>

据我了解的问题，你应该这样做：

  • 将逻辑保留在父组件中。
  • setInterval如果您希望每 n 秒运行一次，请使用。setTimeout延迟后运行代码一次。
  • 如果发生事件并且您想推迟/取消子卸载，请记住致电clearInterval并进行清理。然后你必须打电话给另一个setInterval。

推荐阅读