React.js: cách tạo kiểu nội tuyến tự động cập nhật thanh tiến trình về thay đổi trạng thái

Question

Tôi có thanh tiến trình mà tôi đang xây dựng trong React.js và Zurb Foundation mà tôi muốn phản ánh trạng thái hiện tại. Tôi hiểu rằng trong đầu tôi có thể thiết lập độ rộng với một cái gì đó như thế này:

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> 
    ); 
} 

tuy nhiên

, khi giá trị của đạo cụ thay đổi do sự thay đổi trạng thái, phong cách inline không cập nhật mặc dù những thay đổi giá trị đạo cụ . Có cách nào tốt nhất để thực hiện việc này, chẳng hạn như sử dụng gọi lại hoặc đặt mã ở một nơi khác không? Tôi sẽ đánh giá cao sự giúp đỡ nào!

Answer 1

Một giải pháp là đặt khóa của phần trăm trên phần tử bạn muốn cập nhật. Bằng cách đó khi phản ứng kiểm tra để xem những gì trong DOM đã thay đổi nó thấy rằng khóa đã thay đổi và do đó sẽ xây dựng lại DOM cho phần tử đó.

Xem ví dụ dưới đây:

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> 
); 

}