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

Question

我有一种情况，我需要为div 提供动态宽度，所以我需要在我的 React Js 代码中使用这个divStyle = {width: calc(100% - 276px)}。但是这样做会产生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)' }
]}