为什么将React Context与Framer Motion一起使用不起作用

Question

我有一个幻灯片版本，其中状态存储在本地，您可以看到幻灯片效果很好，只有在动画完成后才会卸载幻灯片组件。https://stackblitz.com/edit/react-framer-motion-slideshow-official?file=src%2FSlideShow.js

一旦我添加了上下文来处理这些值，动画滑动仍然可以工作，但当动画开始时，现有的组件会被新的幻灯片内容替换，这看起来真的很奇怪。此外，幻灯片方向的自定义值似乎已损坏。https://stackblitz.com/edit/react-framer-motion-slideshow-official-context?file=src%2FSlideShow.js

你知道我如何在使用上下文时使动画再次正确工作吗？

Answer 1

每当上下文的状态发生变化时，使用上下文的所有内容都会重新呈现。所以你的Slides组件的孩子们

1. 转发器
2. 看到新的变体=进入下一个状态
3. 出现在目的地

如果我是你，我不会使用上下文。如果你真的不想明确地一遍又一遍地传递相同的道具，你可以做

{[
MainSettingsSlide,
ChangeLanguageSlide,
LanguageDetailsSlide,
BlockedSitesSlide
].map((Component, i) => (
<Component
activeSlideName={activeSlideName}
onNavigateSidebar={onNavigateSidebar}
key={i}
/>
))}

抱歉间接回答：(

两天后编辑

在重读你的问题时，我意识到还有其他一些问题

1. 您需要始终基于道具而非上下文进行有条件渲染

const Slide = ({ children, slideName, className, activeSlideName }) => {
// This context will update outside of framer-motion
// framer-motion animating something in while it is animating something out is
// predicated on you giving it control by using props
// const { activeSlideName } = useSlideShowContext();
// console.log('activeSlideName in Slide', activeSlideName);
// console.log('---------------------');
if (activeSlideName !== slideName) {
return null;
}

2. 您的onNavigateSlideShow使用的是slideDirection而不是direction

const onNavigateSlideShow = ({ slide, direction = 'forward' }) => {
// const onNavigateSlideShow = ({ slide, slideDirection = 'forward' }) => {
console.log('ccc', direction);
setActiveSlide([slide, direction]);
};

3. 我仍然找不到正确的方向我认为这是由于设定的方向和动画开始之间的竞争条件

如果在动画完成之前单击"后退"按钮，它将按预期工作。

以下是我的出发点：https://stackblitz.com/edit/react-framer-motion-slideshow-official-context-dftoab?file=src/SlideShow.js

很抱歉，这又不是一个完整的答案。我想我得出的结论和以前一样，这两个api可能不应该混合在一起。尤其是像这样的边缘案例。

最近有很多关于上下文和AnimatePresence的问题，所以在我能想到的大多数情况下都制作了沙盒：https://codesandbox.io/s/framer-motion-using-context-with-animate-presensce-nuj0m