reactjs - 反应过渡 - 如果使用相同的组件则不起作用

Question

我有以下代码：

<>
                                    {isGuest? (
                                        <FadeInTransition>
                                            <GuestDetails onDisabled={() => onDcpSwitchClick(false)} />
                                        </FadeInTransition>
                                    ) : (
                                        <FadeInTransition>
                                            <MemberDetails onEnabled={() => onDcpSwitchClick(true)} />
                                        </FadeInTransition>
                                    )}
                                </>

过渡组件：

import React from 'react';
import { Transition } from 'react-transition-group';

const fadeInDefaultStyle = {
    transition: `transform 400ms, opacity 400ms ease`,
    opacity: 1,
};

const fadeInTransitionStyles = {
    entering: { opacity: 0 },
    entered: { opacity: 1 },
    exiting: { opacity: 0 },
    exited: { opacity: 0 },
};

export const FadeInTransition = ({ children }) => (
    <Transition
        in
        timeout={{
            appear: 200,
            enter: 500,
            exit: 300,
        }}
        appear
    >
        {(state) => (
            <section
                style={{
                    ...fadeInDefaultStyle,
                    ...fadeInTransitionStyles[state],
                }}
            >
                {children}
            </section>
        )}
    </Transition>
);

由于某种原因，它仅在第一次渲染中有效。FadeInTransition但是，如果我使用与它喜欢的名称相同的代码创建一个新组件OtherTransitoin，它也会在渲染后工作（当 isGuest 使用按钮更改时）

知道有什么问题吗？为什么使用相同的组件 ( FadeInTransition) 会改变一些东西？反应 16.11

标签： reactjs