Verwenden Sie CSS/Jquery Berechnungsfunktion in React Js

Question

Ich habe eine Situation, in der ich die dynamische Breite div geben muss, so dass ich diese divStyle = {width: calc(100% - 276px)} in meinem React Js-Code verwenden muss. Aber dadurch gibt es einen Fehler, calc is not a function.

Ich weiß, dass dies mit Jquery erreicht werden kann, aber ich möchte JQuery nicht in meine Anwendung einführen. Wenn es irgendwelche Workarounds oder Hacks gibt, die das Problem lösen könnten, dann teile es bitte mit.

Code:

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

Answer 1

Wenn Sie einige speziellere CSS müssen Sie es in Anführungszeichen setzen müssen - react inline styles doc

<div style={{width: 'calc(100% - 276px)'}}></div> 

In Ihren genauen Fall

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