Réagissez le CSS dynamique

Question

J'essaye de créer un rectangle qui est "6.25%" fois la largeur retournée d'une fonction pour une vue de calendrier. Les rectangles représentent le nombre d'heures du rendez-vous et doivent rétrécir proportionnellement afin qu'ils s'alignent avec les heures sur l'axe si l'écran est redimensionné. C'est ce que je veux faire, mais cela ne fonctionne pas.

class Appointment extends React.Component { 
    getWidth(appt){ 
    return Math.abs((new Date(appt.end_at)-(new Date(appt.start_at))))/3600000 
} 
    render() { 
    var style = { 
     width:this.getWidth(this.props.appointment) *'6.25%', 
     height:'30px', 
     background:'blue', 
    }; 
    return (
     <div> 
      <div id="rectangle" style={style}></div> 
     </div> 
    ); 
} 
} 

Answer 1

Oui, vous ne pouvez pas multiplier par une chaîne. Obtenez la valeur d'abord, puis créer la chaîne:

var width = this.getWidth(this.props.appointment) * 0.0625; 
var style = { 
    width:`${width}px`, 
    height:'30px', 
    background:'blue', 
}; 

Vous n'avez pas spécifié les unités que vous utilisez, donc je suppose px. En outre, si vous n'êtes pas familier avec les chaînes de modèles, voici une bonne documentation: https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings