如何在功能组件中结束 React Joyride 之旅后重新启动它?

Question

我正在尝试在巡演结束后将 Joyride 的运行属性设置回 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);

Answer 1

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

您应该使用：callback={handleJoyrideCallback}