在React Js中使用CSS/Jquery calc函数

Question

我有一种情况需要给动态宽度,div所以我需要divStyle = {width: calc(100% - 276px)}在我的React Js代码中使用它.但这样做会给出错误calc is not a function.

我知道这可以使用Jquery实现,但我不想将JQuery引入我的应用程序.如果有任何解决方法或黑客可以解决这个问题,那么请分享.

码:

customFormat = 'hello-div'
divStyle = {width: calc(100% - 276px)}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

Answer 1

如果你需要一些更具体的CSS,你需要把它放到引号中 - 反应内联样式doc

<div style={{width: 'calc(100% - 276px)'}}></div>

在你的确切情况下

customFormat = 'hello-div'
divStyle = {width: 'calc(100% - 276px)'}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

如果您需要覆盖多个宽度(后备)以实现浏览器兼容性

divStyle = {width: 'calc(100% - 276px)',
    fallbacks: [
        { width: '-moz-calc(100% - 276px)' },
        { width: '-webkit-calc(100% - 276px)' },
        { width: '-o-calc(100% - 276px)' }
]}