I'm currently looking into animate a set of divs. I came across this example and it is exactly what i need. As im still a noobie in react, i dont really understand how the props are being fed throw the <Fade>
component, inparticular the Fade params ({ children, ...props })
. If someone can shed some light that will be greatly appreciated it..
Here is the snippet of Fade
const Fade = ({ children, ...props }) => (
<CSSTransition
{...props}
timeout={1000}
classNames="fade"
>
{children}
</CSSTransition>
);
Here is the usage:
<div className='container'>
<TransitionGroup className='todo-list'>
{this.state.items.map((item, i) => (
<Fade key={item}>
<div>
{`${item} `}
<button onClick={() => this.handleRemove(i)}>
×
</button>
</div>
</Fade>
))}
</TransitionGroup>
<button onClick={() => this.handleAdd()}>Add Item</button>
</div>
The props are fed to Fade using Destructuring Assignment For example
const {children, ...props} = {children: 0, propsA: 1, propsB: 2}
console.log(children); // 0
console.log(props); // {propsA: 1, propsB: 2}
...
represents Rest & Spread operators
const Fade = ({ children, ...props }) => (); // This ... is Rest Operator
<CSSTransition {...props}/> // This ... is Spread Operator
Here, props.children is those wrapped by Fade
, which is:
<div>
{`${item} `}
<button onClick={() => this.handleRemove(i)}>
×
</button>
</div>
Fade
is like to wrap things using CSSTransition
and conceal some props.
You can actually rewrite as the follows:
<div className='container'>
<TransitionGroup className='todo-list'>
{this.state.items.map((item, i) => (
<CSSTransition key={item} timeout={1000} classNames="fade">
<div>
{`${item} `}
<button onClick={() => this.handleRemove(i)}>
×
</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
<button onClick={() => this.handleAdd()}>Add Item</button>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.