javascript - 无法让 TransitionMotion 在 React Motion 中工作

Question

我正在尝试this.props.data使用 react-motion TransitionMotion 和 spring 在 React 中使用装载/卸载动画渲染一组数据（）。该数据正在通过搜索/过滤功能从单独的组件更新。我尽力遵循 API 参考，但控制台调试仍然向我抛出此警告：Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

尽管有这个警告，数据仍然设法呈现。没有挂载/卸载转换，即使我最多只渲染 10 个项目，当我更改this.props.data.

有谁知道我的代码发生了什么时髦的事情？感谢您对调试的任何帮助。

import React, { Component } from "react";

import classNames from "classnames";
import { TransitionMotion, spring } from "react-motion";

import QtlPanel from "../QtlPanel.jsx";
import GenePanel from "../GenePanel.jsx";
import Loader from "./Loader.jsx";

class PanelArea extends Component {
  getDefaultStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: 0,
        opacity: 1
      }
    }) );
  }

  getStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: spring(80),
        opacity: spring(1)
      }
    }) );
  }

  willEnter = () => ({
    height: spring(0),
    opacity: spring(1)
  })

  willLeave = () => ({
    height: spring(0),
    opacity: spring(0)
  })

  render() {
    const classes = classNames(
      "panel-area", {
        "loading": this.props.loading
      }
    );

    const transitionProps = {
      defaultStyles: this.getDefaultStyles(),
      styles: this.getStyles(),
      willEnter: this.willEnter,
      willLeave: this.willLeave
    };

    return (
      <div className={classes}>
        <Loader isLoading={ this.props.loading } />
        <TransitionMotion { ...transitionProps }>
          { styles => (
            <div>
              { styles.map(({ key, style, data }) => {
                const panelProps = {
                  key: key,
                  data: data,
                  style: style
                };

                if (this.props.activeDataset === "qtl") {
                  return <QtlPanel { ...panelProps } />;
                } else {
                  return <GenePanel { ...panelProps } />;
                }
              }) }
            </div>
          ) }
        </TransitionMotion>
      </div>
    );
  }
}

export default PanelArea;