React Js에서 CSS/Jquery calc 함수 사용

React Js에서 CSS/Jquery calc 함수 사용

다이내믹한 폭의 설정을 할 필요가 있는 상황이 있습니다.div그래서 이걸 써야겠다divStyle = {width: calc(100% - 276px)}내 리액트 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>
)

보다 구체적인 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>
)

브라우저 호환성을 위해 여러 폭(폴백)을 덮어쓸 필요가 있는 경우

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

언급URL : https://stackoverflow.com/questions/38823863/use-css-jquery-calc-function-in-react-js