react.jsチュートリアルから、二重中括弧のこの使用法がわかります。
<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />次に、2番目のチュートリアル「Thinking in react」：
<span style={{ color: 'red' }}>
{this.props.product.name}
</span>;ただし、React JSXのドキュメントでは、二重中括弧についての説明や言及はありません。この構文（二重中括弧）は何のためのものですか？そして、同じことをjsxで表現する別の方法はありますか、これは単なるドキュメントの省略ですか？
回答:
これは、prop値にインライン化された単なるオブジェクトリテラルです。それは同じです
var obj = {__html: rawMarkup};
<span dangerouslySetInnerHTML={obj} />dangerouslySetInnerHTML={__html: rawMarkup}ではなく、その考えの背後にある考え方を知っていますdangerouslySetInnerHTML={rawMarkup}か オブジェクト{__html: rawMarkup}が変更可能で文字列が変更できないためですか？
中括弧はここで2つの使用法を持っています：-
簡単な例を見てみましょう。
<Image source={pic} style={{width: 193}}/>
pic中括弧で囲まれて観察した場合。これが、変数を埋め込むJSXの方法です。pic任意のJavascript式/変数/オブジェクトにすることができます。また、{2 + 3}のようなことを行うと、{5}と評価されます
ここでスタイルを分析してみましょう。
{width: 193}JavaScriptオブジェクトです。このオブジェクトをJSXに埋め込むには、中括弧が必要です。{ {width: 193} }
注：JSXに任意の種類のJavascript式/変数/オブジェクトを埋め込むには、中括弧が必要です。
あなたが知らなかった場合のために、なぜタグで{{color: 'red'}}使用されていますstyle
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;Reactの公式ドキュメントによると、style属性はCSS文字列ではなくJavaScriptオブジェクトを受け入れます。
これは、目的のスタイルプロパティのオブジェクトに設定されているスタイル変数を宣言する代わりに、オブジェクトのスタイルプロパティを設定するだけでよいことを意味します。これは通常、追加するスタイルが少ない場合のベストプラクティスです。より多くのスタイルが必要な要素は、スタイル変数を宣言する方がわかりやすい
たとえば、スタイルプロパティが少ない要素の場合、これを行います
<span style={{color: 'red'}}>
{this.props.product.name}
</span>より多くのスタイルプロパティを持つHTML要素の場合、これを行います
const spanStyle = {
backgroundColor: 'red',
color: 'grey',
margin: '-25px'
}次に、jsx構文で呼び出します
<span style={spanStyle}>
{this.props.product.name}
</span>わかりやすい言葉で伝えたいと思います。以下のコード：
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
等しい
<span
dangerouslySetInnerHTML={ {__html: rawMarkup} }
/>したがって、リテラルオブジェクトをプロパティに割り当てる場合は、単にReact式を使用する必要があります。
主にAngularJからReactJに移行している一部の人にとって、これはおそらくAngularJの式バインディング演算子{{}}との混乱の一部です。したがって、ReactJで別の見方をしてみてください。
二重中括弧の私の解釈は、スタイルオブジェクトはJavaScriptオブジェクトのみを受け入れるため、オブジェクトは単一の中括弧の内側にある必要があるということです。
style={jsObj}スタイルアーティファクトのオブジェクトは、キーと値のペア（辞書と配列）であり、そのオブジェクトは、たとえばとして表されます{color:'#ffffff'}。
だからあなたは持っています：
style = { jsObj }そして
jsObj = {color:'#ffffff'}代数のように、代入すると、次のようになります。
style = { {color:'#ffffff'} }
The exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.