jsx Arten nicht akzeptieren variable

Ich habe diesen Code in meiner Schleifejsx Arten nicht akzeptieren variable

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

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

es anderes Ergebnis als diese

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

ich keine Ahnung habe, produzieren, was falsch ist.

Quelle

2017-05-26 Giala Jefferson

Was sind die Ergebnisse? Wie unterscheiden sie sich? –

'widthStyle' ist eine Zahl. Was innerhalb '' ist, wird zu einer Schnur aufgelöst. Das ist der einzige Unterschied, den ich sagen kann. –

Beide sind sowieso ungültige CSS, außer das Ergebnis ist 0. Es muss eine Einheit im Wert sein. –

Sie haben den gleichen Effekt, Sie geben nicht den Breitentyp an, zB px oder %. am Ende anhängen. Auch müssen Sie sicherstellen, dass die obj Werte sind Zahlen

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>

Quelle

2017-05-26 05:08:27

jsx Arten nicht akzeptieren variable

Antwort

Verwandte Themen