反应动态 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

反应动态 CSS

React Dynamic CSS

css

dynamic

width

reactjs