jsx样式不接受变量

Question

我的循环中有这段代码

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

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

它产生的结果与此不同

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

我不知道出了什么问题。

Answer 1

它们具有相同的效果，您没有指定宽度类型，例如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>