React Swiper 子组件无法更新父组件的状态

时间:2021-03-23 09:06:48

标签: javascript reactjs swiper

我正在使用 Swiper for React 并且我正在尝试实现整页滑动。 CodeSandbox 在这里:https://codesandbox.io/s/nested-full-page-swiping-8i7sv

基本上,当你向左或向右滑动到幻灯片 A 或 C 时,它应该禁用垂直滑动,并且只有当你在任何行的幻灯片 B 上时才应该启用。

出于某种原因,我的父组件的状态在被 onSlideChange 事件触发时没有正确更新。我已尝试其他事件,例如 onSlideChangeTransitionEnd,但 vertSwipe 状态未正确更新。

我之前用与其他一些组件完全相同的方式完成了此操作,所以我不完全确定为什么在这种情况下子组件更新父组件的状态不起作用。我曾尝试将状态设置器包装在一个函数中并传递给该函数,但这似乎也不起作用。

感谢您的帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

Code Sandbox demo here

我设法让它工作。子 Swiper 基本上会用 swiper.enable()swiper.disable() 击中父 Swiper。我相信这是完成这项工作的最高效的方式,因为这不会触发重新渲染,而且实际上非常优雅。