未知的屬性 - 陣營動畫

我得到這個錯誤「warning.js：36警告：未知道具onExited，appear，enter，exit標籤上從元素刪除這些道具詳細信息，請參閱... 。在DIV 在DIV（由TransitionGroup創建）在TransitionGroup（由TripFilteredList創建）在DIV（由TripFilteredList創建）在TripFilteredList（由TripSortedList創建）在DIV（由TripSortedList創建）在TripSortedList（由TripFilteredList創建）（由TripFinder創建） in div（由TripFinder創建） in 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 
    }

來源

2017-08-18 Negin Basiri

你可以發佈'TripRow'的定義嗎？ –

@ free-soul更新了代碼 –

解決！ Transition（TripRow）組件需要成爲Transition組的直接子項。

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

來源

2017-08-21 05:03:47

您能否請您直接向孩子解釋一下，或者您是如何解決這個問題的簡單例子。我遇到了同樣的問題。 –

非常感謝。這解釋了它。 –

未知的屬性 - 陣營動畫

回答

相關問題