基本的な動的スタイル

Question

私はリアクションを使って簡単なdivをスタイルするのに問題があります。

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を成功させて使用しようとしました。代わりに、引用符の中括弧（{}）のペアで表現、属性値としてyou should wrapをJavaScript式を使用するには

Answer 1

（""）

だから、基本的な構文は以下の通りです：

<Component propName={propValue} /> 

のショートハンドを以下のとおりです。文字列を渡すため

の1-：

<Component propName="some-string" /> 

true

2-渡すため：だから

<Component propName /> 

を、あなたのコードは、オブジェクトが期待されている支柱として文字列 "{スタイル}を" 通過しようとします。 " - 」、それが修正されます{スタイル}の代わりに<。" {スタイル}> - その代わりに、

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

またはあなたは私のような検索している場合だけ、インライン

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