ReactのJSX構文で生のHTMLソースにコメントを埋め込む方法

Rakuten Deveropersを活用したWebアプリ開発中に、改変不可のHTMLコメント埋め込みが必要になりましたが、方法がわかりづらかったので解説します。

本来ならNext.jsではNext/LinkとNext/Imageを使って書くところですが、Rakuten Deveropersのバナーは改変禁止となっており、提供されたコードをそのまま埋め込まないといけません。

Rakuten Webservice: How to Display Branding & Give Credit

How to display branding credit when using the Rakuten Web Service APIs.

しかし、このようにJSX上でコメントアウトしてもソースにはHTMLコメントが出力されません。

<div className="flex space-x-4">
　{/* Rakuten Web Services Attribution Snippet FROM HERE */}
　<Link href="https://webservice.rakuten.co.jp/" target="_blank">
　　<Image
　　src="https://webservice.rakuten.co.jp/img/credit/200709/credit_31130.gif"
　　alt="Rakuten Web Service Center"
　　title="Rakuten Web Service Center"
　　width="311"
　　height="30"
　　/>
　</Link>
　{/* Rakuten Web Services Attribution Snippet TO HERE */}
</div>

そこで使えるのがdengerouslySetInnerHTMLです。

 <div className="flex space-x-4" dangerouslySetInnerHTML={{ __html: 
'<!-- Rakuten Web Services Attribution Snippet FROM HERE -->' +
　'<a href="https://webservice.rakuten.co.jp/" target="_blank">' +
　　'<img src="https://webservice.rakuten.co.jp/img/credit/200709/credit_31130.gif" border="0" alt="Rakuten Web Service Center" title="Rakuten Web Service Center" width="311" height="30"/>' +
　'</a>' +
'<!-- Rakuten Web Services Attribution Snippet TO HERE -->'}} />

このように、タグのpropsにdangerouslySetInnerHTMLを指定し、文字列としてHTMLを渡してあげればHTMLコメントをコードに埋め込むことができます！

用途としては限定的ですが、イースターエッグとしてアスキーアートをソースに埋め込んだりするときなどに使えそうです。