为什么在Framer中使用React上下文不起作用？
我有一个幻灯片的版本，状态存储在本地，您可以看到幻灯片运行良好，只有在动画完成后才卸载幻灯片组件。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
当我使用上下文时，你有什么想法可以让动画再次正确地工作吗？
回答 1
Stack Overflow用户
发布于 2021-06-11 11:17:09
每当上下文的状态发生变化时，所有消耗上下文的内容都会重新呈现。所以您的Slides组件的子组件
- rerender
- see使新变量=指向下一个状态的
- 出现在目标
上
如果我是你，我就不会用上下文。如果你真的不想一而再再而三地传递同样的道具，你可以这样做。
{[
MainSettingsSlide,
ChangeLanguageSlide,
LanguageDetailsSlide,
BlockedSitesSlide
].map((Component, i) => (
<Component
activeSlideName={activeSlideName}
onNavigateSidebar={onNavigateSidebar}
key={i}
/>
))}对间接回答表示歉意:)
两天后编辑
在重读你的问题时，我意识到还有其他一些问题
- 您需要始终根据道具(而不是上下文
)有条件地呈现
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;
}- 您的
onNavigateSlideShow使用的是slideDirection而不是
const onNavigateSlideShow = ({ slide, direction = 'forward' }) => {
// const onNavigateSlideShow = ({ slide, slideDirection = 'forward' }) => {
console.log('ccc', direction);
setActiveSlide([slide, direction]);
};- ，我仍然找不到方向正确的方向，我认为这是因为在被设置的方向和动画从
中被踢开之间的竞争条件。
如果在动画完成前单击“后退”按钮，它将按预期工作。
很抱歉，这又不是一个完整的答案。我想我和之前得出的结论一样，这两个apis可能不应该混在一起。尤其是像这样的边缘案件。
最近有很多关于上下文和AnimatePresence的问题，所以在我所能想到的大多数案例中都有沙箱：https://codesandbox.io/s/framer-motion-using-context-with-animate-presensce-nuj0m。
https://stackoverflow.com/questions/67893190
复制相似问题
腾讯云开发者
