Grundlegende dynamische Stil

Question

Ich habe ein Problem, ein einfaches div mit reagieren.

var Wireframe = React.createClass({ 

    render() { 


    var styles = { 
     height: 100, 
     width: 150, 
     color: 'red' 
    }; 

    console.log('style', styles); 
    return (
     <div style="{styles}"></div> 
    ); 
    } 


}); 

Ich verstehe nicht warum. Ich habe versucht, React.StyleSheet.create ohne Erfolg zu verwenden.

<Component propName={propValue} /> 

Shorthands:

Answer 1

Um einen JavaScript-Ausdruck als Attributwert, you should wrap den Ausdruck in einem Paar von geschweiften Klammern ({}) anstelle von Anführungszeichen ("")

So grundlegende Syntax folgt zu verwenden sind:

1- für die Weitergabe Strings:

<Component propName="some-string" /> 

2- für das Bestehen true:

<Component propName /> 

Also, Ihr Code attemps String zu übergeben "{} Stile" als Stütze, wo Objekt erwartet wird. Stattdessen sollten Sie

<div style={styles}></div> 

oder Inline-

<div style={{width: "10px"}}></div>