React.js: come fare in modo che gli stili in linea aggiornino automaticamente la barra di avanzamento sul cambio di stato

Question

Ho una barra di avanzamento che sto creando in React.js e Zurb Foundation che vorrei riflettere sullo stato corrente. Capisco che in principio posso impostare la larghezza con qualcosa di simile:

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

tuttavia, quando il valore di puntelli variazioni dovute ad un cambiamento di stato, lo stile in linea non aggiorna anche se il valore puntelli modifiche . Esiste una best practice per fare ciò, come usare un callback o posizionare il codice da qualche altra parte? Gradirei qualsiasi aiuto!

Answer 1

Una soluzione consiste nel mettere una chiave della percentuale sull'elemento che si desidera aggiornare. In questo modo quando reagisci controlla per vedere cosa è cambiato nel DOM vede che la chiave è cambiata e quindi ricostruirà il DOM per l'elemento.

vedi esempio qui sotto:

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

}