ReactとHTMLでは使えるAttributes名が違うことがある

Reactで class のAttributeを出力しようとしたら、Visual Studio Codeが以下のようなエラーを返してきた。

[ts] Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

何かと思ったら、単にJSXで class が使えないというだけだった。
class はJSでの予約語なので、HTMLをrenderしたいときは className を使わなければいけない。
HTMLをJSで扱えるようにしているので、このようなコンフリクトが生まれるのは確かに仕方がないだろう。

他にもこのように名前が違うケースがあるのだろうかと思って調べたら、Reactの公式ドキュメントに一覧が載っていた。

facebook.github.io

checked や htmlFor などは、フォームを作るときによく使いそう。
単純な話だけど、知らなかったので時間を食ってしまった。