JSXでReact.Componentを宣言する時の注意点
Components and Props
と
JSX In DepthのUser-Defined Components Must Be Capitalized
を読み返してびっくりしたことがあった。
React.Componentを表示する時、頭文字を大文字にしないといけないということだ。
どういうことか例を出す。
class HelloMessage extends React.Component { constructor(props) { super(props); } render() { return <div>Hello React</div> } } ReactDOM.render( <HelloMessage />, document.getElementById('test') );
例として簡単なソースコードを記載した。
divタグにHelloMessageコンポーネントを表示させる処理なのだが、HelloMessageの頭文字がHと大文字になっているのでこの処理は正常終了する。
ところがだ、Hを小文字にした場合は、エラーが発生する。
class helloMessage extends React.Component { constructor(props) { super(props); } render() { return <div>Hello React</div> } } ReactDOM.render( <helloMessage />, document.getElementById('test') );
これはどういうことかというと、React側の処理として、小文字の場合は、ブラウザがサポートしている標準のタグと認識するので、React.Componentが小文字だとそのままタグとして表示しようとしてエラーになってしまう。
今まで当たり前のように、React.Component宣言時は、頭文字を大文字にしていたので気にならなかったので、これは盲点だった。