为什么使用带有 Framer Motion 的 React Context 不起作用？

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;
  }

1. 您的 onNavigateSlideShow 使用的是 slideDirection 而不是方向

 const onNavigateSlideShow = ({ slide, direction = 'forward' }) => {
    // const onNavigateSlideShow = ({ slide, slideDirection = 'forward' }) => {

    console.log('ccc', direction);
    setActiveSlide([slide, direction]);
  };

1. 我仍然无法找到正确的方向 我认为这是由于设置的方向和动画开始之间存在竞争条件

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

这是我要去的地方：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