JSX風格不接受可變

我有這樣的代碼我的循環JSX風格不接受可變

let widthStyle = obj.total_days * obj.calendayDay_width - 20 

<div style={{ 
    width: widthStyle 
}} />

內就產生不同的結果，這

<div style={{ 
    width: `${obj.total_days * obj.calendayDay_width - 20}` 
}} />

我不知道什麼是錯的。

來源

2017-05-26 Giala Jefferson

結果是什麼？他們有什麼不同？ –

'widthStyle'是一個數字。 ''裏面的東西是解析成字符串的。這是我可以說的唯一區別。 –

無論如何，兩者都是無效的CSS，除非結果爲0.必須有值的單位。 –

它們將具有相同的效果，您沒有指定寬度類型，例如px或%。在最後附加它。你還必須確保在obj值爲數字

class App extends React.Component { 
 
    render() { 
 
     var obj = { 
 
      total_days: 20, 
 
      calendayDay_width: 20 
 
     } 
 
     let widthStyle = obj.total_days * obj.calendayDay_width - 20 
 
     return (
 
      <div> 
 
       <div style={{width: `${obj.total_days * obj.calendayDay_width - 20}`+ 'px', backgroundColor: 'orange' 
 
}} >Hello</div> 
 
<div style={{ 
 
    width: widthStyle + 'px', backgroundColor: 'red' 
 
}} >World</div> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<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="app"></div>

來源

2017-05-26 05:08:27

JSX風格不接受可變

回答

相關問題