React Dynamic CSS

Question

"6.25 %"와 달력보기의 함수에서 반환 된 너비의 곱을 구하려고합니다. 직사각형은 약속 시간 수를 나타내며 화면의 크기가 조정 된 경우 시간 축과 정렬되도록 비례하여 축소해야합니다. 이것은 내가하고 싶은 일이지만, 작동하지 않습니다.

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

네, 문자열로 곱하면 안됩니다.

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

당신은 당신이 사용했던 단위를 지정하지 않았다, 그래서 나는 px 가정 : 다음 문자열을 만들고, 먼저 값을 가져옵니다. 템플릿 문자열에 익숙하지 않은 경우에도 다음과 같은 좋은 설명서가 있습니다. https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings