替代jsx的内联CSS转换

Question

尝试在jsx中将转换用作内联样式时，存在很多stackoverflow问题，但是解决方案使用jquery（我尚不知道如何使用），或者不在可以访问javascript Date（）的内联中。 我试图根据一天中24小时制的时间旋转图像。

如果转换仅适用于jsx的内联css，我将很高兴，如下所示。

var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var totalseconds = hour*3600+minute*60+second;
var totalsecondsoutofday = totalseconds/86400;
var totaldegrees = totalsecondsoutofday*360;

<img src={clockbordersun} className="clockborder" style={{transform:rotate(totaldegrees)}} alt="error" />

提前致谢

Answer 1

<img src={clockbordersun} className="clockborder" style={{'transform':'rotate(totaldegrees')}} alt="error" />

Answer 2

CSS可以完成的任何事情都可以用内联样式或jss完成。 语法是相同的，除了jss是camelCase，而CSS属性使用- 。 唯一的问题是您不是在字符串上插值。 这应该做您需要的。

const style = {
    transform: `rotate(${totaldegrees})`
}