我有一个函数 gauge(dom_element, value, max)
,它在元素(使用 Canvas )内绘制一个仪表(用针)。
小部件没有更新方法,您必须再次调用它以删除旧小部件并绘制具有新值的新小部件。
我如何包装它以便在 ReactJS 状态 value
更改时调用该函数来重新创建仪表?
最佳答案
您几乎可以将此模式用于您包装的任何插件;有些人在有事件等时需要更多。
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(){
// ...
}
});
关于javascript - 为 ReactJS 包装遗留小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25377759/