Question

我遇到需要为div提供动态宽度的情况，所以我需要在我的React Js代码中使用此divStyle = {width: calc(100% - 276px)}。但这样做会产生错误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

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)' }
]}

如果您需要覆盖多个宽度（fallbacks）以实现浏览器兼容性

document.addEventListener('click', TimerThenPlay);

function TimerThenPlay(e) {
    setTimeout(500) 
    document.elementFromPoint(1175, 85).click();
    stop(TimerThenPlay);
    clearTimeout(TimerThenPlay);
    return; 
};

Answer 2

“ calc”是具有“ css”语言的函数，Javascript引擎未定义“ calc”。

在React Js中使用CSS / Jquery calc函数

2 个答案: