React Motion willEnter and 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이 해당 항목을 제거합니다.