React Motion willEnter和willLeave未触发

Question

我正在尝试启动并运行react-motion，但由于某些原因，在使用TransitionMotion时，willEnter和willLeave方法似乎无法触发。

目前我的设置如下：

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组件。您仍然需要向TransitionMotion提供"this.props.recommendations“数据。

例如，如果您删除this.props.recommendations数据中的intem，则transition motion将保留该项，并仍然将其传递给子函数param。因此，当您在这些项目上映射插值样式时，您仍然会生成相同的组件。

它将保持插值，同时在每一帧检查删除的当前项值。一旦删除的项目达到指定的0，TransitionMotion将永久删除它。