web-dev-qa-db-fra.com

Utiliser la fonction de calcul CSS/Jquery dans React Js

J'ai une situation dans laquelle je dois donner une largeur dynamique à la variable div. Je dois donc utiliser cette fonction divStyle = {width: calc(100% - 276px)} dans mon code React Js. Mais cela donne une erreur que calc is not a function.

Je sais que cela peut être réalisé en utilisant Jquery mais je ne veux pas introduire JQuery à mon application. S'il existe une solution de contournement ou un hack qui pourrait résoudre ce problème, merci de le partager.

code:

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

Si vous avez besoin de CSS plus spécifique, vous devez le mettre entre guillemets - réagir aux styles en ligne doc

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

Dans votre cas exact

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

Au cas où vous auriez besoin de remplacer plusieurs largeurs ( fallbacks ) pour la compatibilité du navigateur

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

"calc" est une fonction du langage "css", le moteur Javascript ne définit pas "calc".

0
Zhang Yanxing