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