基本的动态风格

Question

我有一个问题，风格与反应简单的股利。

var Wireframe = React.createClass({ 

    render() { 


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

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


}); 

我不明白为什么。我试图使用React.StyleSheet.create没有成功。

Answer 1

要在一对大括号（{}）代替引号使用JavaScript表达式作为属性值，you should wrap表达式（""）

所以基本语法如下：

<Component propName={propValue} /> 

速记是：

1-对于传递字符串：

<Component propName="some-string" /> 

传递true 2-：

<Component propName /> 

所以，你的代码attemps传递字符串 “{}风格” 的道具，其中对象的预期。相反，你应该

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

或只是直列

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