javascript - 在功能组件中结束后如何重新启动 React Joyride Tour？

Question

我正在尝试在游览结束后将 Joyride 的 run 属性设置回 false，但我不确定如何执行此操作。我尝试过使用他们的回调函数，但我找不到使用函数式组件的示例。这是我的 Joyride 组件代码：

<Joyride
    run={run}
    steps={steps}
    debug
    continuous
    showSkipButton
    showProgress
    callback={handleJoyrideCallback()}
    styles={{
      options: {
        arrowColor: theme.palette.common.white,
        primaryColor: theme.palette.secondary.main,
        textColor: theme.palette.primary.dark,
        width: 500,
        zIndex: 10000,
      },
      buttonNext: {
        backgroundColor: theme.palette.secondary.main,
        border: "none",
        borderRadius: 0,
        color: theme.palette.common.white,
        "&:focus": {
          outline: "none !important",
        },
      },
      buttonBack: {
        color: theme.palette.primary.dark,
        marginLeft: "auto",
        marginRight: 5,
      },
      buttonClose: {
        color: theme.palette.primary.dark,
        height: 14,
        padding: 15,
        position: "absolute",
        right: 0,
        top: 0,
        width: 14,
      },
    }}
  />

这是回调函数：

const handleJoyrideCallback = (data) => {
const { status, type } = data;
const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
if (finishedStatuses.includes(status)) {
  setRun(false);
}

};

还有 setRun 的东西：

  const [run, setRun] = useState(false);

标签： javascriptreactjsreact-functional-component

Answer 1

这是因为您正在调用该函数 handleJoyrideCallback in callback={handleJoyrideCallback()}

你应该使用： callback={handleJoyrideCallback}