TransitionGroup中的Reactjs CSSTransition组件道具

Question

我目前正在研究动画化一组div。我遇到了这个例子，它正是我所需要的。由于我还没有做出反应，我真的不明白道具是如何被喂食的——投掷<Fade>组件，尤其是渐变参数({ children, ...props })。如果有人能提供一些线索，我们将不胜感激。

以下是Fade的片段

const Fade = ({ children, ...props }) => (
<CSSTransition
{...props}
timeout={1000}
classNames="fade"
>
{children}
</CSSTransition>
);

以下是用法：

<div className='container'>
<TransitionGroup className='todo-list'>
{this.state.items.map((item, i) => (
<Fade key={item}>
<div>
{`${item} `}
<button onClick={() => this.handleRemove(i)}>
&times;
</button>
</div>
</Fade>
))}
</TransitionGroup>
<button onClick={() => this.handleAdd()}>Add Item</button>
</div>

Answer 1

道具使用Destructuring Assignment提供给Fade，例如

const {children, ...props} = {children: 0, propsA: 1, propsB: 2}
console.log(children); // 0
console.log(props); // {propsA: 1, propsB: 2}

...表示Rest&排列操作员

const Fade = ({ children, ...props }) => (); // This ... is Rest Operator
<CSSTransition {...props}/> // This ... is Spread Operator

这里，道具.children是由Fade包裹的道具，即：

<div>
{`${item} `}
<button onClick={() => this.handleRemove(i)}>
&times;
</button>
</div>

Fade就像用CSSTransition包装东西，并隐藏一些道具
您实际上可以按如下方式重写：

<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)}>
&times;
</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
<button onClick={() => this.handleAdd()}>Add Item</button>
</div>