Question

我收到此错误＆＃34; warning.js：36警告：标记上的未知道具onExited，appear，enter，exit。从元素中删除这些道具。有关详情，请参阅...... 在div中（由TripFilteredList创建）在div中（由TransitionGroup创建）在TransitionGroup中（由TripFilteredList创建）在div中（由TripFilteredList创建）在TripFilteredList中（由TripSortedList创建）在div中（由TripSortedList创建）在TripSortedList中（由TripFinder创建）在div（由TripFinder创建）在TripFinder＆＃34;

我正在使用

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>

            );
        }


    }

还有Fade class

    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类是一个泛型类，也可以在项目的其他位置使用。我有一个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) => {
    return (
        <TransitionGroup appear={true} key={index}>
            <Fade in={this.state.transitionFlag}>
                <TripCard {...data} />
            </Fade>
        </TransitionGroup>
    )
});

TransitionGroup上的未知属性 - React Animation

1 个答案: