🧊

Reactのコンポーネントに小文字を使うと

ダメです。

ドキュメントにも普通に書いてます。

JSX in Depth | React

ドキュメントいわく

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

小文字はHTMLのタグと混同するからダメよ、と。

なんでこの記事をメモったか

Unknown DOM property RESOURCE..

みたいなWarningsが出てて、なにかと思ったのがきっかけ。

`xxxMainImage`と、別の名前空間で使う`yyyMainImage`があったときに、コンポーネントにそのまま`MainImage`って使うと紛らわしい気がしたので、コンポーネント名からも名前空間をつけておこうと思い、

<xxxMainImage RESOURCE={} />
<yyyMainImage RESOURCE={} />

ってしてたのが原因。

これは以下のようにレンダリングされちゃう。

<xxxmainimage RESOURCE={} />
<yyymainimage RESOURCE={} />

そんなHTML要素ないんですけどね。

そして、`resource`属性ってのがRDFa的にはちゃんとあって、JSXがそれにも対応してるので、属性間違えてるよ!っていうWarningsが出たというわけ。

Tags and Attributes | React