ReactJSはオブジェクトリテラルを文字列に解析しますか？

Question

私は、特にコードの側面は、本当に私を悩ます「で反応を考える」のセクションを介してじっくり考え、今ReactJSチュートリアルを歩いています：

class ProductRow extends React.Component { 
    render() { 
    var name = this.props.product.stocked ? 
     this.props.product.name : 
     <span style={{color: 'red', background: 'green'}}>  // this line 
     {this.props.product.name} 
     </span>; 
    return (
     <tr> 
     <td>{name}</td> 
     <td>{this.props.product.price}</td> 
     </tr> 
    ); 
    } 
} 

コードの残りの部分については、以下を参照してください。 http://codepen.io/lacker/pen/vXpAgj

... 11行目に、スタイルが割り当てられます（{color： 'red'}）。私の頭の中では、スタイリングシンタックス（例えば、 "color： 'red'"）に適合しないため、これはうまくいかないでしょう。しかし、中括弧を二重引用符で置き換えると、コードは実行されません。

1）オブジェクトリテラルを二重引用符形式に変換するES6/JSX/Reactルールはありますか？ （どのように機能しますか）

2）中括弧を二重引用符で置き換えないのはなぜですか？ （コードェーンで試してみた）

ありがとう！

Answer 1

documentationに記載されているように、style属性は、CSS文字列ではなくcamelCasedプロパティを持つJavaScriptオブジェクトを受け入れます。したがって、引用符で囲まれた文字列で置き換えると、それは機能しません。

このアプローチは、DOMスタイルのJavaScriptプロパティと一貫性があり、より効率的で、XSSのセキュリティホールを防止するため、この方法を選択します。

スタイル名は、ダッシュで区切られているのではなく、キャラルケースになっています。すなわちmargin-leftではなく、marginLeftとなります。

Answer 2

オブジェクトリテラルを二重引用符形式に変換するES6/JSX/Reactルールはありますか？ （これはどのように機能しますか）

style propは文字列またはオブジェクト値を受け入れます。したがって、ある意味では、オブジェクトは適切なCSSテキスト文字列に変換されます。これは、DOM要素のstyleプロパティと非常によく似ています。

ただし、これはHTML要素を表すコンポーネントの固有の動作です。それがすべてのコンポーネントに対して行われた場合、オブジェクトをカスタムコンポーネントに渡すことはできません。

中括弧を二重引用符で置き換えないのはなぜですか？

文字列"{color: 'red'}"は有効なCSSではありませんので。あなたが中括弧を置き換えようとしたという事実は、あなたがその違いを理解しているかどうか疑問に思います。

JSX属性の形式は、foo="bar"またはfoo={bar}のいずれかです。最初のケースでは、fooに渡される値は、値barを含む文字列になります。 2番目のケースでは、中括弧（{}）内のものはJavaScript式として評価され、その結果はfooに渡されます。

我々はこれらのJSXスニペットがに変換されているものを見ればこれは、より明白であるかもしれない：

// In: 
<div style="color:red" /> 
// Out: 
React.createElement("div", { style: "color:red" }); 

// In: 
<div style={{color: 'red'}} /> 
// Out: 
React.createElement('div', { style: { color: 'red' } }); 

// Therefore 
// In: 
<div style="{color: 'red'}" /> 
// Out: 
React.createElement("div", { style: "{color: 'red'}" });