問題タブ [reactcsstransitiongroup]

私のコードは、公式のReact-Router git repoの例と非常によく似ています。

問題を示すコードペンを次に示します。

問題は次のとおりです。属性で指定された時間を待つ代わりにtransitionEnterTimeout、新しい要素がすぐにレンダリングされます。次に、両方の css アニメーション (開始と終了) が同時に実行されます。その後、前の要素が削除されます。

もう少し複雑なセットアップでローカルに同じ問題があります。そのため、問題がどこにあるかを確認するために単純なコードペンを作成しました。

すべてのフレームワーク (react、react-router、react-addons-css-transition-group) の最新バージョンを使用しています。

私はReactにかなり慣れていません。完全な CRUD を実装して学習しようとしています。ただし、リストからコースを削除するためのアニメーションがうまく機能しません。

アニメーションを何度も設定transitionAppearしましたtransitionLeave。transitionAppear動作は問題ありません。私は得ることができませんtransitionLeave

これは私のコンポーネントです: https://github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js

これはアニメーションの CSS です: https://github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66

より良いアプローチがあれば教えてください。

どんな助けでも大歓迎です！

乾杯レオナルド

私は、HOC を使用して再利用可能な React トランジションを作成するための Chang Wang のチュートリアルReactTransitionGroup(パート 1 パート 2 ) と、ページ遷移に関する Huan Ji のチュートリアル (リンク) に従っています。

私が直面している問題は、React.cloneElement更新された小道具をその子の 1 つに渡していないように見えるのに対し、他の子は更新された小道具を適切に受け取ることです。

まず、いくつかのコード:

TransitionContainer.js

TransitionContainerAppは、 Huan Ji のチュートリアルに似たコンテナー コンポーネントです。状態のスライスを子に注入します。

の子TransitionGroupはすべて、呼び出された HOC のインスタンスですTransition(コードはさらに下にあります) 。

Transition.js

TransitionChang Wang の HOC に似ています。componentWillEnterいくつかのオプションを取り、 +フックを定義しcomponentWillLeave、コンポーネントをラップします。TransitionContainer(上)props.transitionStateこの HOC に注入します。ただし、状態が変化しても小道具が更新されないことがあります (以下の問題を参照) 。

オプション

オプションの構造は次のとおりです。

移行ライフサイクル (onEnter または onLeave)

• コンポーネントが実装されると、actions.registerComponent発送され ます
  • componentWillMount
• コンポーネントのcomponentWillLeaveまたはcomponentWillEnterフックが呼び出されると、オプションの対応するスライスがに送信されますdoTransition
• doTransition:
  • ユーザー提供の transitionBegin 関数が呼び出されます ( optionSlice.transitionBegin)
  • デフォルトaction.willLeaveまたはaction.willEnter発送されます
  • アニメーションの継続時間にはタイムアウトが設定されています ( optionSlice.duration)。タイムアウトが完了すると:
    • ユーザー提供の transitionEnd 関数が呼び出されます ( optionSlice.transitionEnd)
    • デフォルトactions.transitionCompleteは発送されます

基本的に、optionSlice は、ユーザーがいくつかのオプションを渡すことを許可するだけです。optionSlice.transitionBeginユースケースに適してoptionSlice.transitionEndいる場合は、アニメーションの進行中に実行されるオプションの関数にすぎません。現在、コンポーネント用に何も渡していませんが、これをすぐにライブラリにしたいと考えているので、ベースをカバーしているだけです。

とにかく遷移状態を追跡するのはなぜですか?

入る要素に応じて、出るアニメーションが変化し、その逆も同様です。

たとえば、上の画像では、青が入ると赤が右に移動し、青が出ると赤が左に移動します。ただし、グリーンが入ると赤は左に移動し、グリーンが出ると赤は右に移動します。これを制御するには、現在の遷移の状態を知る必要があります。

問題：

にTransitionGroupは 2 つの要素が含まれています。1 つは入り、もう 1 つは出ます (react-router によって制御されます)。呼び出された小道具transitionStateをその子に渡します。TransitionHOC ( の子)TransitionGroupは、アニメーションの過程で特定の redux アクションをディスパッチします。入るコンポーネントは propsのTransition変更を期待どおりに受け取りますが、出るコンポーネントは凍結されます。小道具は変わりません。

更新された小道具を受け取らないのは、常に終了しているものです。ラップされたコンポーネントの切り替え (出入り) を試みましたが、問題はラップされたコンポーネントが原因ではありません。

画像

画面遷移:

React DOM での遷移

この場合、既存のコンポーネント Transition(Connect(Home))) は、更新された props を受け取っていません。

これが事実である理由はありますか？すべての助けを前もって感謝します。

更新 1:

私はTransitionContainer上記に私のものを更新しました。現在、フックcomponentWillEnterとcomponentWillLeaveフックは呼び出されていません。関数にログを記録するReact.cloneElement(child, {...})とchildFactory、フック (および のような定義済み関数doTransition) がprototype属性に存在します。constructor、componentWillMountおよびのみcomponentWillUnmountが呼び出されます。これは、keyプロップが を介して注入されていないためだと思われますReact.cloneElement。注射されてるけどtransitionState。dispatch

更新 2:

TransitionGroup ソースをさらに調べたところ、キーを間違った場所に置いていることに気付きました。今はすべて順調です。助けてくれてどうもありがとう!!