React.js:如何使内联样式自动更新状态更改的进度条

Question

我有一个我在React.js和Zurb Foundation建立的进度条,我想反映当前的状态.我知道在开始时我可以用这样的东西设置宽度:

render: function() {
    var spanPercent = (this.props.a - this.props.b)/this.props.a + '%';
    var spanStyle = {
        width: spanPercent
    };
    return (
        <div className="progress">
            <span className="meter" style={spanStyle}></span>
        </div>
    );
}

但是,当props的值因状态更改而发生更改时,即使props值发生更改,内联样式也不会更新.这样做是否有最佳实践,例如使用回调或将代码放在其他位置？我将不胜感激任何帮助!

Answer 1

一种解决方案是在要更新的元素上放置百分比的键.这样当反应检查以查看DOM中的内容已更改时,它会发现密钥已更改,因此将重建元素的DOM.

见下面的例子:

render: function() {
   var spanPercent = (this.props.a - this.props.b)/this.props.a + '%';
   var spanStyle = {
          width: spanPercent
       };
   return (
      <div className="progress">
        <span key={spanPercent} className="meter" style={spanStyle}></span>
      </div>
);

}