反应计时器+颜色更改

Question

我在react中有一个简单的div元素，现在我希望能够在某个地方（例如10分钟后）预设时间。 div会改变颜色。

有人知道这是否有可能实现吗？

Answer 1

使用componentDidMount API初始化计时器，不要忘记在componentWillUnmount处将其删除。

class App extends Component {
  constructor() {
    super()
    this.state = {
      color: 'blue'
    }
  }

  handleChangeColor = (newColor) => {
    this.setState({
      color: newColor
    })
  }

  componentDidMount() {
    this.timer = setTimeout(
      () => this.handleChangeColor('red'),
      1000*3 // in milliseconds, 3s for fast show
    )
  }

  componentWillUnmount() {
    clearTimeout(this.timer)
  }

  render() {
    return (
      <div style={ { background: this.state.color} }>
        Color Div
      </div>
    )
  }
}

有关完整代码，请选中here。