具有setTimeout的Map函数不返回JSX元素

Question

我在想，是否有可能在地图元素上使用setTimeout创建动画按钮。 我正在学习React Transition组，并创建了以下代码：

function NavItemSub(props) {

  const array1 = props.array1;
  return (
    <ul className="gallery-menu" >
      <TransitionGroup className="todo-list"
        component={null}>{array1.map((e, index) => (
          <SwitchTransition>
            <CSSTransition
              key={index}
              in={true}
              timeout={1000}
              classNames="item"
              appear={true}
            >
              <li key={index} className="item">
                <a href="#" className="icon-button-sub">{props.icon}{e}</a>
              </li>
            </CSSTransition>
          </SwitchTransition>
        ))}
      </TransitionGroup>
    </ul>
  )
}

效果是按钮同时出现。我希望按钮一个接一个地输入。我已经尝试过在循环上添加setTimeout函数，并且它可以与一些简单的console.log一起工作，但是它没有返回JSX元素。 感谢您的帮助。

Answer 1

您尝试过这样的事情吗？

timeout={index * 1000}