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

  • 4
    いいね
  • 0
    コメント

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

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

チェックリスト

  • ReactCSSTransitionGroup の children はそれぞれ key を付与されているか?
    • ドキュメント参照
  • ReactCSSTransitionGroup は常に存在しているか?
    • ドキュメント参照
  • 同コンポーネント内に ReactCSSTransitionGroup 自体が複数あるときに、それぞれ key が付与されているか?
  • children に別の手段で transition スタイルが付与されているか?
    • そちら側の詳細度が勝っていませんか。

以上

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

2017-03-15 追記

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

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

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

申し訳ない。