他の場所から取得したデータを含む React コンポーネントをアニメーション化しようとしています。ReactCSSTransitionGroupそれをうまく機能するように配置します。つまり、コンポーネントのメソッドを変更して、データがフェッチされるまでrender()返すようにするまで ( data なしでレンダリングされないようにするため)。false
コンポーネントはすぐにマウントされ、その時点でアニメーション クラスが追加されますが、後でレンダリングされるだけです。この考え方は正しいでしょうか？render実際のコンポーネントを返すときにコンポーネントをアニメーション化するにはどうすればよいですか?
ReactCSSTransitionGroup は、コンポーネントがその に追加および削除されるたびにアクティブになりますprops.children。render()コンポーネントはデータをフェッチする前にマウントされるため、データがフェッチされた後は何も起こりません (コンポーネントのメソッドが false を返す場合でも、これは正しいと思います。間違っている場合はコメントでお知らせください)。
<div key="1">反応クラスがデータを受け取るまで、コンポーネントをマウントしないでください (ソリューションではタグです)。親コンポーネントでコンポーネントの状態を使用して、非同期リクエストの状態を追跡します。
ReactCSSTransitionGroup は、デフォルトの動作が span 要素でタグをラップすることであるため、テーブルではうまく機能しません。独自のコンポーネントを提供することもできますが、ソリューションは非常に重く複雑であることがわかりました。
コンテンツが変更されるたびに React コンポーネントをアニメーション化できる別のアプローチがあります。アニメーションは、2 つの重複する CSS スタイルを切り替えることによって継続的にトリガーされます。