webentwicklung-frage-antwort-db.com.de

Verwenden Sie die CSS/Jquery-Berechnungsfunktion in React Js

Ich habe eine Situation, in der ich der div eine dynamische Breite geben muss, also muss ich diese divStyle = {width: calc(100% - 276px)} in meinem J-Code von React verwenden. Dadurch wird jedoch der Fehler calc is not a function angezeigt.

Ich weiß, dass dies mit Jquery erreicht werden kann, aber ich möchte JQuery nicht in meiner Anwendung vorstellen. Wenn es irgendeine Art von Problemumgehung oder Hack gibt, die dieses Problem lösen könnte, teilen Sie es uns bitte mit.

code:

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

Wenn Sie etwas spezifischeres CSS benötigen, müssen Sie es in Anführungszeichen setzen - Inline-Stile reagieren doc

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

In deinem genauen Fall

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

Falls Sie mehrere Breiten ( Fallbacks ) überschreiben müssen, um die Browserkompatibilität zu gewährleisten

divStyle = {width: 'calc(100% - 276px)',
    fallbacks: [
        { width: '-moz-calc(100% - 276px)' },
        { width: '-webkit-calc(100% - 276px)' },
        { width: '-o-calc(100% - 276px)' }
]}
36
Majky

"calc" ist eine Funktion mit der Sprache "css", die Javascript-Engine definiert nicht "calc".

0
Zhang Yanxing