反应过渡组不应用类

Question

我正在使用 React Transition Group 为每个项目设置不同的超时时间。问题是我的链接没有收到任何课程。但是，当我通过 TransitionGroup 包装 ScollLinks 标签时，动画会起作用，但控制台会显示警告。我不知道问题出在哪里。

Props 参数接收具有布尔属性的对象。

const NavItems = (props) => {
 const items = ["section1", "section2", "section3", "section4", "section5"];

 return (
  <>
  <NavItemsOverlay open={props.open} />

  <ScollLinks open={props.open}>
    <TransitionGroup component={null}>
      {items.map((item, index) => {
        return (
          <CSSTransition
            in={props.open}
            key={index}
            timeout={{
              enter: 100 * index,
              exit: 0,
            }}
            classNames="fade"
            unmountOnExit >
            <Link>{item}</Link>
          </CSSTransition>
        );
      })}
    </TransitionGroup>
  </ScollLinks>
 </>
 );
};

Answer 1

像这样在 TransitionGroup 之外声明您的项目：

const NavItems = (props) => {
  const items = ["section1", "section2", "section3", "section4", "section5"];
  const itemsList = items.map((item, index) => {
    return (
      <CSSTransition
        in={props.open}
        key={index}
        timeout={{
          enter: 100 * index,
          exit: 0,
        }}
        classNames="fade"
        unmountOnExit
      >
        <Link>{item}</Link>
      </CSSTransition>
    );
  });
  return (
    <>
      <NavItemsOverlay open={props.open} />

      <ScollLinks open={props.open}>
        <TransitionGroup component={null}>{itemsList}</TransitionGroup>
      </ScollLinks>
    </>
  );
};