React Motion willEnterとwill will not have firing

Question

私は反応運動を開始しようとしていますが、何らかの理由でwillEnterとwillLeaveというメソッドがTransitionMotionを使用しているときに発火していないようです。

import React, { Component } from 'react'; 
import RecommendationItem from '../typeahead/typeahead_recommendation_block'; 
import { TransitionMotion, spring } from 'react-motion'; 

const CALIBRATE = { stiffness: 120, damping: 14 }; 

export default class Recommendations extends Component { 

constructor(props) { 
    super(props); 

    this.willEnter = this.willEnter.bind(this); 
    this.willLeave = this.willLeave.bind(this); 
    this.getStyles = this.getStyles.bind(this); 
} 

willEnter() { 
    console.log('Enter'); 
    return { 
    maxHeight :0, 
    opacity: 0 
    } 
} 

willLeave(){ 
    console.log('Leave'); 
    return { 
    maxHeight : spring(0, CALIBRATE), 
    opacity: spring(0, CALIBRATE) 
    } 
} 

getStyles() { 
    return { 
    maxHeight: spring(500, CALIBRATE), 
    opacity: spring(1, CALIBRATE) 
    } 
} 

render() { 
    const { 
    showRecommendations 
    } = this.props 

    if(!showRecommendations) { 
    return null; 
    } 

    return (
    <div className="typeahead-recommendations"> 
     <TransitionMotion 
     willEnter={ this.willEnter } 
     willLeave={ this.willLeave } 
     styles={ 
      Object.keys(this.props.recommendations).map((key, i) => ({ 
      key : `${key}-${i}`, 
      data : { 
       title   : key, 
       recommendations : this.props.recommendations[key] 
      }, 
      style : this.getStyles() 
      })) 
     }> 
     { (interpolate) => 
      <div> 
      { 
       interpolate.map(block => { 
       if(block.data.recommendations.length && block.key !== 'productSuggestions') { 
        return <div key={ block.key } style={ block.style }> 
          <RecommendationItem 
           title={ block.data.title } 
           recommendations={ block.data.recommendations } /> 
          </div> 
       } 
       }) 
      } 
      </div> 
     } 
     </TransitionMotion> 
    </div> 
) 
} 
} 

Recommendations.displayName = "Recommendations"; 

をwillEnterとwillLeaveでconsole.logsは単に決して発射されていない現時点では、次のよう

現在、私のセットアップがあります。これがなぜそうであるかについてのアドバイスは大いにありがとうございます

Answer 1

TransitionMotionコンポーネント全体をアンマウントしていることがあります。 「this.props.recommendations」データをTransitionMotionに与える必要があります。

たとえば、this.props.recommendationsデータ内のintemを削除すると、トランジションモーションによってアイテムが保持され、それでも子ファンクションのパラメータに渡されます。したがって、これらの補間されたスタイルをマッピングするとき、同じコンポーネントを作成しています。

すべてのフレームで削除された現在のアイテムの値をチェックしながら、補間を続けます。削除されたアイテムが指定された0に達すると、TransitionMotionはそれを良好に削除します。