Reactjs TransitionGroup 中的 CSSTransition 組件道具

Question

我目前正在研究為一組 div 設置動畫。 我遇到了這個例子，這正是我所需要的。 由於我仍然是反應中的菜鳥，我真的不明白道具是如何被拋出<Fade>組件的，特別是 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

使用解構賦值將道具饋送到 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

這里， props.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>