更新中 <canvas/> 使用React和setTimeout

Question

我希望以下代碼導致React

• 在頁面上渲染一個畫布標簽，其中<canvas>包含單詞'foo'
• 一秒鍾后將道具更改為“酒吧”
• 用單詞'bar'更新<canvas>並用單詞'bar'更新<span>

<span>更新，但<canvas>不更新

import React from 'react'

var CanvasTest = React.createClass({

  componentDidMount() {
    this.animate(this.props.text)
  },

  animate(str) {
    var c = document.getElementById('canvas')
    var ctx = c.getContext('2d')
    ctx.clearRect(0,0,10,50)
    ctx.fillText(str, 10, 50)
  },

  render() {
    return (
      <div>
        <span>{this.props.text}</span>
        <canvas id="canvas" width="100" height="100"></canvas>
      </div>
    )
  }

})

export default React.createClass({

  getInitialState() {
    return {
      str: 'foo'
    }
  },

  componentDidMount() {

    setTimeout(() => {
      this.setState({ str: 'bar' })
    }, 1000)

  },

  render() {
    return (
      <CanvasTest text={this.state.str}/>
    )
  }

})

Answer 1

您可以在CanvasTest中使用“ componentWillReceiveProps”

componentWillReceiveProps(newProps) {
    ctx.fillText(newProps.text, 10, 50);

    // to re-render
    this.forceUpdate();
}

Answer 2

原來clearRect僅清除了canvas一小部分，請參見以下參數：

animate(str) {
  var c = document.getElementById('canvas')
  var ctx = c.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillText(str, 10, 50)
},