javascript - 在 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，您需要将其放在引号中 - react inline styles 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>
)

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

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