React Transition Group：当 TransitionGroup 子项位于单独的组件中时退出转换不起作用 像这样工作不是这样工作完整代码样式

如何解决React Transition Group：当 TransitionGroup 子项位于单独的组件中时退出转换不起作用 像这样工作不是这样工作完整代码样式

错误行为：在新添加新项目时，所有项目都会激活“进入”，删除项目时，“退出”和“退出”都不会运行以删除或任何其他项目。

当过渡子项直接位于 TransitionGroup 组件内时，动画工作正常。但是我的代码的逻辑是这样的，我必须在另一个组件中运行它。动画不像以前那样工作了。

除了将注入的 props 分散到嵌套的 Transition 组件中之外，我们还有什么必须做的吗？

像这样工作

<TransitionGroup>
  {fruits.map(({id,name}) => (<Transition key={id} timeout={1000}>
    {(state) => {
      //state logic
      return (<h3>{name}</h3>);
    }}
  </Transition>)}
</TransitionGroup>

不是这样工作

const ChildrenComp = (props) => {
  return fruits.map(({id,name} => (<Transition {...props} key={id} timeout={1000}>
    {(state) => {
      //state logic
      return (<h3>{name}</h3>);
    }}
  </Transition>));
};

<TransitionGroup>
  <ChildrenComp /> // inside another component
</TransitionGroup>

完整代码

const Animate = () => {
  const [fruits,setFruits] = React.useState(items); 
  
  const handleAdd = () => {
    setFruits((prev) => setFruits([
      ...prev,{ id: uuid(),name: `fruit-${uuid().slice(0,4)}` },]));
  };

  const handleDelete = () => {
    setFruits((prev) => setFruits(prev.slice(0,prev.length - 1)));
  };

  const GroupChildren = (props) => {
    return fruits.map(({id,name}) => {
      return (
        <div key={id}>
          <Transition {...props} key={id} timeout={TIMEOUT}>
            {(state) => {
              const isExiting = state === 'exiting' || state === 'exited';
              const isEntering = state === 'entering';
              const isEntered = state === 'entered';
  
              const animateClasses = classNames({    
                'animation-exit': isExiting,'animation-enter': isEntering,'animation-entered': isEntered,});                
  
              if (state === 'exiting' || state === 'exited') {
              }
              
              return (
                <h3 className={animateClasses}>{name}</h3>
              );
            }}
          </Transition>
        </div>
      );
    });
  };

  return (
    <div>
      <h1>Animation</h1>
      <TransitionGroup>        
        {fruits && <GroupChildren />}        
      </TransitionGroup>
      <div>
        <button onClick={handleAdd}>add</button>
        <button onClick={handleDelete}>delete</button>
      </div>
    </div>
  );
};

样式

.animation-enter {
  background-color: green;
}

.animation-exit {
  background-color: red;
}

.animation-entered {
  background-color: #ddd;
}