不明なプロパティ - リアクトアニメーション

Question

私はこのエラー「warning.js取得しています：36警告：不明な小道具onExited、appear、enter、タグにexitを要素からこれらの小道具を削除する詳細については、... を参照してください。 divの中のdivに （TripFilteredListによって作成された）（TransitionGroupによって作成された） TransitionGroup中（TripFilteredListによって作成された） のdiv内（TripFilteredListによって作成された） TripFilteredList中（TripSortedListによって作成された） のdiv内（TripSortedListによって作成された） TripSortedListで（TripFinderで作成） in div（TripFinderで作成） Tr ipFinder」私は

import TransitionGroup from 'react-transition-group/TransitionGroup'; 


     <TransitionGroup component="div" childFactory={child => child} > 
      <div className={`cards ${display === 'other' ? 'search-results__other-content' : ''}`}> 

       {display === 'row' && 
        tripFilteredList.map((data, index) => <TripRow key={index} {...data} />) 
       } 

      </div> 
     </TransitionGroup> 

を使用しています

トリップ行コード

import React, { Component } from 'react'; 
    import PropTypes from 'prop-types'; 
    import { Fade } from '../../components'; 

    export default class TripRow extends Component { 

     constructor(props) { 
      super(props); 
      this.state = { 
       animationTrigger: false 
      }; 
     } 

     componentWillMount() { 
      this.setState({ 
       animationTrigger: true 
      }); 
     } 

     componentWillUnmount() { 
      this.setState({ 
       animationTrigger: false 
      }); 
     } 

     render() { 
      const { title, id, thumbnailUrl, startLocation, endLocation, price, departureDate, summary, duration, countries, lastSeats, bestValue } = this.props; 
      const style = { 
       backgroundImage: `url(${thumbnailUrl})` 
      }; 
      return (
       <Fade in={this.state.animationTrigger}> 
        <div className="trip-finder__card-row"> 
          some content here 
        </div> 
       </Fade> 

      ); 
     } 


    } 

もフェードクラス

import CSSTransition from 'react-transition-group/CSSTransition'; 

    import React from 'react'; 

    const Fade = ({ children, ...props }) => { 

     return (

      <CSSTransition 
       {...props} 
       timeout={{enter: 500,exit: 500}} 
       classNames="fade" 
      > 
       {children} 
      </CSSTransition > 
     ); 
    }; 

    export default Fade; 

フェードクラスはジェネリッククラスであり、他で使用されていますプロジェクトの場所も同様です。 私は基本的に子（リスト行）をレンダリングするFadeコンポーネントを持っています。誰でもこの警告の内容と修正方法を知っていますか？ここで

は、CSS

解決

.fade-enter, 
    .fade-appear, 
    .fade-exit { 
     transition: all 500ms; 
    } 
    .fade-enter, 
    .fade-appear { 
     opacity: 0; 
    } 
    .fade-enter-active, 
    .fade-appear-active { 
     opacity: 1 
    } 
    .fade-exit { 
     transition: all 500ms; 
     opacity: 1; 
    } 
    .fade-exit-active { 
     opacity: 0 
    } 

Answer 1

です！ Transition（TripRow）コンポーネントは、Transitionグループの直接の子である必要があります。

tripFilteredList.map((data, index) => <TransitionGroup appear={true} key={index}><Fade in={this.state.transitionFlag}><TripCard {...data} /></Fade></TransitionGroup>)