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

Posted 2023-03-06

【中文标题】在 React Js 中使用 CSS/Jquery calc 函数

【英文标题】：Use CSS/Jquery calc function in React Js

【发布时间】：2016-12-13 21:55:09

【问题描述】：

我有一种情况，我需要为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>
)

【问题讨论】：

你在 reactjs 中是如何使用它的？

你能发布你的代码吗？

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

【参考方案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)' 
]

【讨论】：

减号两边的空格很重要