React.js「に」ハマっているわけではありません。
確かに便利だけど、微妙に惜しい感じですね。
色々ハマったのですが、後日自分でも忘れてしまいそうなので、自分用のメモということで愚痴を書きます。
「Target container is not a DOM element.」問題
Reactのチュートリアル見ていると、必ずこんな感じで書いてあります。
ReactDOM.render(<Game />, document.getElementById('container'));
なんですが、画面のレンダリングを待つ必要があるため、正確にはこうです。
$(function(){ ReactDOM.render(<Game />, document.getElementById('container'))); });
これをしないと、「Target container is not a DOM element.」というエラーが出るのですが、ググっても問題も解決も出てきません。
JSerは、日常的にonLoadを待って行動する機能が本能にインプットされていて、この程度の問題でつまずく事もないのでしょうか？
Webpackと併用してReactを使っていて、両方共初心者だったので、原因特定が送れて１日潰しました(恨)。
「Each child in an array or iterator should have a unique "key" prop.」問題
これは、ググると解説が一杯出てきます。
"Reactでリスト構造を扱う場合、「key」と言う名のプロパティ(prop)を設定すると良いよ"というワーニングで、key={number}などと、適当に設定すればワーニングは消えます。
ですが、次の「Unknown prop hoge on <div> tag. Remove this prop from the element.」問題との合わせ技で、混乱しました。
結果出力されたタグを確認するために、Chromeの「検証」機能を使ってエレメントの確認をすると、設定したはずのkeyプロパティ(attribute)が表示されないのです。
- 理想 <div key=123 hoge=1>
- 現実 <div>
これには焦りました。
「Unknown prop hoge on <div> tag. Remove this prop from the element.」問題
上記の挙動の原因は、Reactの仕様で、recognizedなプロパティ以外はRemoveされるみたいです(ちょっとルー語っぽい)。
僕は、割りとアチコチのタグに独自のAttributeを設定して操作したいタイプなので、この仕様はちょっと・・・困ります。
Reactで操作する限り、VirtualDOMを扱うついでに付帯情報も関数間で受け渡せる気がするので、独自Attributeの出番はないのかもしれませんが、jqueryプラグインとか、その他ライブラリでも独自Attributeの追加はバンバンやっていると思うので、この仕様とバッティングして使えないライブラリが結構ありそう・・・。
話が前後しますが、上記のkeyプロパティもVirtualDOM上では、Reactに認識されているようですが、リアルDOMには反映されません。
裏でReactが操作するのに使うみたいです。これも、デバッグのしようがなくて困る気がするんだよなあ。
ちなみになんでこんな仕様になっているかというと、VirtualDOMは、ただのJavaScriptのObjectを操作するので、「タグのプロパティなのかObjectのプロパティなのか判別できない」という問題があるようで、Reactでは、ホワイトリスト形式でプロパティを選別しているようです。
技術的に回避しようのない問題な気もしますが、不便きわまりないですね。
こんな方法で回避している人もいるみたいですが、アクロバティック感が否めない。。。
宣言的に使用するプロパティを定義できれば解決するような気がしますが、どうなんでしょうかね？
ということで、React.jsハマった記録でした。
