【React】JSXの{{}}

JSXの{{}}について

ReactのJSX内で二重波括弧 {{}} を使用する場合、これはオブジェクトのリテラルを埋め込むために使用されます。

使用方法

例えば、スタイルをインラインで設定する場合によく使われます。一重の波括弧 {} の中にオブジェクトを記述し、その中でCSSプロパティと値のペアを指定します。

import React from 'react';

function MyComponent() {
  const styles = {
    color: 'red',
    fontSize: '20px',
    fontWeight: 'bold'
  };

  return (
    <div style={styles}>
      This text has custom styles.
    </div>
  );
}

export default MyComponent;

上記の例では、styles という名前のオブジェクトを作成し、color、fontSize、fontWeight のプロパティを指定しています。このオブジェクトを style 属性の値として設定することで、その要素に指定されたスタイルが適用されます。

まとめ

二重波括弧を使用することで、外側の波括弧 {} はJavaScriptの式として解釈され、内側の波括弧 {} はオブジェクトのリテラルとして解釈されます。