JSXで変数の値をdata属性のkeyに指定する方法

背景

data属性を定数として持っておきたい。これを紐づけようのdata属性として適当なコンポーネントに付与をしたい。

方法

コンポーネントのdata属性に当てるための変数を以下のように定義する。

const DATA_ATTR_KEY = 'data-attr';

コンポーネントに対しては、以下のような記述をする。

<Component {...{ [`${DATA_ATTR_KEY}`]: '' }} />

DATA_ATTR_KEYは{[定数]: ''}という形の指定で、{ 'data-attr': '' }というオブジェクトが生成される。
さらにスプレッド構文で展開して、Componentコンポーネントにはdata-attrというプロパティが渡される。