ReactでDOMにカスタムデータ属性を設定したい。

HTML5ではカスタムデータ属性が導入されdata-という接頭辞をつければDOMに自由に属性値を入れる事が可能。

Reactでも同じ事が可能です。

ですが、今回WOVNという翻訳サービスを導入するにあたり指定のタグを一部の決められたDOMだけに埋め込む必要がありました。同社からwovn-enableとタグを入れる様に指示があり、DOMにそのまま埋め込んだのですが、それではレンダリングされた時にタグそのものが入らず、wovn-enable=“true”でもだめでした。そこでdata-接頭辞をつけてみたらタグ自体は入るものの翻訳がされない、と全然うまくいかずに困っていたのですが、コールバックRefを使って見事に解決できたので記事にまとめました。

Reactで同じような問題でお悩みの方の助けになればと思います。

WOVN.ioは、ウェブサイト・アプリを様々な言語に多言語化できるサービス。

まず、コールバックRefに関して。React公式ドキュメントから抜粋。

createRef() によって作成された ref 属性を渡す代わりに、関数を渡します。この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これを保持することで、他の場所からアクセスできます。

要は、refコールバックを使えば、 DOMに外からアクセスして制御ができるという事です。

公式ドキュメントに習い、こんな感じで実装しました。

DOMにコールバックRefを埋め込みます。

<p ref={this.setWovn}>
	hogehoge
</p>

constructorでコールバック関数を実行します。

constructor(props: Props) {
	this.setWovn = element => {
		if(element) element.setAttribute(‘wovn-enable’, ‘true’);
	}
}

これでばっちりタグにwovn-enable=“true”とカスタム属性値が入り、翻訳もきちんとされるようになりました。

最初は禁じ手のdocument.getElementBy…でやってしまおうかと思ってしまいましたが、公式ドキュメントに載ってるやり方なのでこれが間違い無いと思います。ただRefは使いすぎないとも書かれています。

Refを使う前にコンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください、との事です。