React Tour 在 Dialog Material UI 中使用幻灯片过渡时位置错误

Question

如上所述，我正在使用

react-tour

为我的项目实施指导。

第一步是一个小组件，位于需要突出显示的

<Dialog />

内。但由于转变，

react-tour

错误地计算了位置。如果我使用键盘

Right/Left

箭头，它将再次重新计算并正确显示。

我在这里放了一个简短的示例：https://codesandbox.io/s/react-tour-with-dialog-material-ui-dbtkh

在第 109 行，如果我注释掉这一行

TransitionComponent={Slide}

，它将起作用，因为默认转换是

Fade

。问题是从一开始，我们选择的初始动画是“向上滑动”并且它全局应用。我只是不能简单地改变这一点。

我无法从 主存储库站点找到重新计算的方法或 API。

任何解决方法，我真的很感激

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";
import MuiDialogActions from "@material-ui/core/DialogActions";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
import Tour from "reactour";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

const tourConfig = [
  {
    // updateDelay: 1500,
    selector: '[data-tut="reactour__iso"]',
    content: `Ok, let's start with the name of the Tour that is about to begin.`
  },
  {
    selector: '[data-tut="reactour__logo"]',
    content: `And this is our cool bus...`
  }
];

export default function CustomizedDialogs() {
  const accentColor = "#5cb7b7";
  const [open, setOpen] = React.useState(false);
  const [isTourOpen, setTourOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const closeTour = () => {
    setTourOpen(false);
  };
  const openTour = () => {
    handleClickOpen(true);
    setTourOpen(true);
  };

  return (
    <div>
      <Button variant="outlined" color="secondary" onClick={openTour}>
        Open Tour
      </Button>
      <Tour
        onRequestClose={closeTour}
        disableInteraction={false}
        steps={tourConfig}
        isOpen={isTourOpen}
        maskClassName="mask"
        className="helper"
        rounded={5}
        accentColor={accentColor}
      />
      <Dialog
        TransitionComponent={Slide} //Removing this effect will correct the behavior
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Modal title
        </DialogTitle>
        <DialogContent dividers>
          <Typography data-tut="reactour__iso" gutterBottom>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </Typography>
          <Typography gutterBottom>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </Typography>
          <Typography gutterBottom>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button
            data-tut="reactour__logo"
            autoFocus
            onClick={handleClose}
            color="primary"
          >
            Save changes
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

我遇到了同样的问题，但我给巡演的第一部分设置了相同的过渡时间，这对我有用

Answer 2

您可以在开启游览前添加超时。

const openTour = () => {
  setTimeout(() => {
    setTourOpen(true);
  }, 2000)
};