react-transition-group三元表达式同时渲染if/else分支问题解决

问题根源在于 TransitionGroup 的渲染规则：它要求所有直接子元素必须是过渡组件（如CSSTransition）。当你直接渲染文本节点作为子元素时，TransitionGroup 无法正确跟踪它的卸载生命周期，导致添加列表项后提示文本依然滞留在DOM中。

方案一：给空提示也包裹过渡组件 #

将空状态提示套入CSSTransition并设置唯一key，让TransitionGroup能正确处理它的卸载逻辑：

const ItemsList = ({ items }) => {
  return (
    <TransitionGroup component="ul" timeout={400}>
      {items.length === 0 ? (
        <CSSTransition key="empty-state" classNames="item-animation" timeout={400}>
          <li>There is no items</li>
        </CSSTransition>
      ) : (
        items.map((item, i) => (
          <CSSTransition key={i} classNames="item-animation">
            <li key={i}>{item}</li>
          </CSSTransition>
        ))
      )}
    </TransitionGroup>
  );
};

方案二：将空提示移到TransitionGroup外部 #

直接在过渡组之外判断空状态，完全避开TransitionGroup的特殊渲染逻辑，这也是更简洁的处理方式：

const ItemsList = ({ items }) => {
  if (items.length === 0) {
    return <p>There is no items</p>;
  }
  
  return (
    <TransitionGroup component="ul" timeout={400}>
      {items.map((item, i) => (
        <CSSTransition key={i} classNames="item-animation">
          <li key={i}>{item}</li>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
};

推荐第二种方案，因为空状态提示通常不需要动画效果，放在过渡组外更符合业务逻辑，也能避免过渡组件带来的不必要性能开销。

内容的提问来源于stack exchange，提问作者rodorgas