如何將「px」添加到calc函數中？

-1

style={{ width: 'calc(100% - 300px)' }}

我想要做這樣的事情：

let myWidth: number = 300; 
style={{ width: 'calc(100% - {myWidth})' }}

上面的例子失敗了，我怎麼做到呢？

來源

2017-09-17 tweetypi

設置myWidth到像這樣的字符串：let myWidth = '300px';

嘗試下面的代碼片段或看到這個CodePen Demo

const App =() => { 
 
    let myWidth = "300px"; 
 
    return (
 
    <div className="full"> 
 
     <div className="inner" style={{ width: `calc(100% - ${myWidth})` }}> 
 
     Hi 
 
     </div> 
 
    </div> 
 
); 
 
}; 
 

 
ReactDOM.render(<App />, document.getElementById("root")); 
 

 
// log .inner div style 
 
console.log(document.querySelector(".inner").style.width);

.full { 
 
    width: 100%; 
 
    background: black; 
 
    height: 100vw; 
 
} 
 

 
.inner { 
 
    background: white; 
 
    font-size: 2em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='root'></div>

來源

2017-09-17 10:44:40

使用模板字符串：

const myWidth: number = 300; 
style = {{ width: `calc(100% - ${myWidth}px)` }}

來源

2017-09-17 10:23:01

不工作.. – tweetypi

在變量 –

看起來好像不接受$ {myWidth}作爲字符串文字後，檢查'px'，該字符串的結果結束爲calc（100％ - $ myWidth} px）' – tweetypi

如何將「px」添加到calc函數中？

回答

相關問題