javascript - 为 ReactJS 包装遗留小部件

Question

我有一个函数 gauge(dom_element, value, max)，它在元素(使用 Canvas )内绘制一个仪表(用针)。

小部件没有更新方法，您必须再次调用它以删除旧小部件并绘制具有新值的新小部件。

我如何包装它以便在 ReactJS 状态 value 更改时调用该函数来重新创建仪表？

Answer 1

您几乎可以将此模式用于您包装的任何插件；有些人在有事件​​等时需要更多。

var Gauge = React.createClass({

  // handle the first mount and updates
  // in this case there's no difference between init and update
  // with the gauge widget, so these just delegate to updateGauge
  componentDidMount: function(){ 
    this.updateGauge(this.props.value, this.props.max); 
  },
  componentWillReceiveProps: function(nextProps){ 
    if (nextProps.value !== this.props.value) {
      this.updateGauge(nextProps.value, nextProps.max);
    }
  },

  // render an empty div, which will be `this.getDOMNode()` in the following function
  render: function(){ return <div />; },

  // actually tell the plugin to run
  updateGauge: function(value, max){
    gauge(this.getDOMNode(), value, max);
  },

  // clean up after the gauge widget
  // sometimes you don't need anything here, but if you do
  // you'll get a nice error from react when it's unmounted :-)
  componentWillUnmount: function(){
    // ...
  }
});