ReactCSSTransitionGroupが動かないときのチェックリスト

React の Add-on のひとつである ReactCSSTransitionGroup (= react-addons-css-transition-group)が期待通りに動かないときのためのチェックリストです。

上記のドキュメントに明記されているものと、そうじゃないもので構成されています。

チェックリスト

• ReactCSSTransitionGroup の children はそれぞれ key を付与されているか？
  • ドキュメント参照
• ReactCSSTransitionGroup は常に存在しているか？
  • ドキュメント参照
• 同コンポーネント内に ReactCSSTransitionGroup 自体が複数あるときに、それぞれ key が付与されているか？
  • key を明示しないと動きませんし、Warning も出ません。
  • Ref) https://github.com/facebook/react/issues/1850
• children に別の手段で transition スタイルが付与されているか？
  • そちら側の詳細度が勝っていませんか。

以上

他にもありましたら、追加願います！

2017-03-15 追記

以前このようなチェック項目をあげていましたが、現在の最新版で調査したところ少なくともこの制約はありませんでした。

• [ ] transitionName が半角ハイフンを含んでいないか？
  • - は解釈できないようです。_ 半角アンダースコアは可のようです。

過去も、今回のケースをそのまま検証しているようなテストケースは見つかりませんでしたが、長い間修正されていない 類似のケース を見ると過去もそのような制約はなかったように見えます。

申し訳ない。