React.js：如何使内联样式在状态更改时自动更新进度条答案

【问题标题】：React.js: how to make inline styles automatically update progress bar on state changeReact.js：如何使内联样式在状态更改时自动更新进度条
【发布时间】：2015-03-11 00:20:36
【问题描述】：

我在 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 值发生变化，内联样式也不会更新。是否有这样做的最佳实践，例如使用回调或将代码放在其他地方？我将不胜感激！

【问题讨论】：

"当 props 的值由于状态变化而变化时" --- 这究竟是什么意思？
对不起，我的意思是说 this.props.a 从中获取集合的数据库中的数据发生了变化。我也会在ajax调用回来之前乐观地更新this.props.a的值
通常您可以订阅这些更改并使用setState 更改状态。
我正在使用setState，这确实更新了this.props.a的值，当我只是在组件的其他地方显示值时，就会反映出这种变化，但它并没有更新样式，而不是确定为什么这可能不会发生？
你的风格不依赖于状态，而是依赖于props。状态在this.state

标签： javascript zurb-foundation reactjs

【解决方案1】：

一种解决方案是将百分比的键放在要更新的元素上。这样，当 react 检查 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>
);

}

【讨论】：

React 不检查它的 DOM diff 算法或其他东西中的样式属性更改吗？这个答案对我有用，但我仍然对为什么会出现这种行为感到困惑。
@ccnokes 我同意。他们似乎劝阻你不要“手动更新”，但你会得到这样奇怪的结果，让你不信任框架。