[英]Component for TransitionGroup
I'm trying to create a reuseable component for <TransitionGroup>
but not sure where to place the {children}
.我正在尝试为
<TransitionGroup>
创建一个可重用的组件,但不确定将{children}
放在哪里。
import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const TransitionFade = ({ children }) => {
return(
<TransitionGroup>
<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
{children}
</CSSTransition>
</TransitionGroup>
);
}
export default TransitionFade;
I probably don't understand your question 100% (it could include more detail), but perhaps you were looking for something like this, ie, use the fade effect on each child separately, not just as a whole?我可能没有 100% 理解你的问题(它可能包含更多细节),但也许你正在寻找这样的东西,即,分别对每个孩子使用淡入淡出效果,而不仅仅是作为一个整体?
import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const TransitionFade = ({ children }) => {
return(
<TransitionGroup>
{ React.Children.map(children, child =>
(<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
{child}
</CSSTransition>)
)
}
</TransitionGroup>
);
}
export default TransitionFade;
Seems like a neat idea, since there are many contexts in which one would like to add or remove children from a list or similar.似乎是一个不错的主意,因为在许多情况下,人们想要从列表或类似的列表中添加或删除子项。 I might start using this already.
我可能已经开始使用它了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.