在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>
)

- iamsaksham

---

你在ReactJS中如何使用它？ - Bhojendra Rauniyar

你能发一下你的代码吗？ - Roysh

divStyle 应该是一个字符串。divStyle = '{width: calc(100% - 276px)}' - Roysh

Answer 1

如果您需要更具体的CSS，您需要把它放入引号中 - React内联样式文档。

<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)' }
]}

- Majky

---

减号两侧的空格很重要。 - ShortArrow

我总是忘记加空格，谢谢 @ShortArrow - Kitwradr