在React Js中使用CSS/Jquery计算函数

Use CSS/Jquery calc function in React Js

本文关键字：Jquery 计算 函数 CSS React Js      更新时间：2023-09-26

我有一种情况，我需要给div动态宽度，所以我需要在我的React Js代码中使用这个divStyle = {width: calc(100% - 276px)}。但这样做会产生一个错误CCD_。

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

代码：

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

如果你需要一些更具体的CSS，你需要把它放在引号里-反应内联样式文档

<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)' }
]}
相关文章：