材质UI在单击按钮时转换出来

Question

在"材质UI 过渡"文档中,有一些按钮触发过渡的示例.我有一个按钮触发状态更改的情况,我希望以前的数据转换出来,然后转换新的数据.我发现这样做的唯一方法是setTimeout.有没有更好的办法？

在CodeSandbox中

import React from "react";
import Slide from "@material-ui/core/Slide";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const words = ["one", "two", "three"];
const transitionDuration = 500;

class TransitionCycle extends React.Component {
  state = {
    activeIndex: 0,
    elementIn: true
  };

  onClick = () => {
    this.setState({
      elementIn: false
    });
    setTimeout(() => {
      this.setState({
        elementIn: true,
        activeIndex: (this.state.activeIndex + 1) % words.length
      });
    }, transitionDuration);
  };

  render() {
    const { activeIndex, elementIn } = this.state;

    return (
      <div>
        <Button onClick={this.onClick}>Cycle</Button>
        <Slide
          in={this.state.elementIn}
          timeout={transitionDuration}
          direction="right"
        >
          <Typography variant="h1">{words[this.state.activeIndex]}</Typography>
        </Slide>
      </div>
    );
  }
}

export default TransitionCycle;

这是在Material UI中进行背靠背转换的最佳方法吗？使用感觉很奇怪setTimeout.

Answer 1

我认为有条件地渲染所有 3 个Slides可以解决你的问题，在这里。

我还检查了它的源代码Transition，它setTimeout最终也使用了它，所以我认为使用它并没有那么“奇怪”，但如果该组件已经为我们包装了低级 api（我的意思是 setTimeout），那么我们肯定不会不想用它。

编辑：

作为OP的评论，我发现我误读了他的示例并且没有注意到输出转换，所以我修改了我的代码以满足要求。现在前一个Slide完全退出，然后下一个进入。一切都是由组件设计的 props 完成的。（不过，底层Transition源代码只是包装了 Rudolf Olah 的方法，但我只是尝试仅使用设计的道具）

然而，仅使用Transition的 props，我认为不可能实现 OP 使用的“延迟”输入setTimeout，所以如果 OP 仍然希望在“Two”输入之前有那么小的延迟，你可能仍然需要使用setTimeout。