React+Framer Motion中如何跨节点树传递滚动状态至Outlet？

核心思路 #

把滚动状态的管理提升到Layout组件（NavBar和Outlet的共同父级），通过React props传递状态给子组件，同时利用Framer Motion的响应式值和动画能力实现平滑联动，既避免DOM操作，也不需要引入Redux这类全局状态造成过度设计。

实现步骤 #

1. 在Layout组件中集中管理滚动状态

将滚动监听逻辑移到Layout，直接使用Framer Motion的scrollY响应式值，无需通过useState中转（减少不必要的重渲染）：

import { useScroll } from 'framer-motion';
import NavBar from './NavBar';
import Footer from './Footer';
import { Outlet } from 'react-router-dom';
import EzStackMui from './EzStackMui';
import { motion } from 'framer-motion';

export default function Layout() {
  const { scrollY } = useScroll();

  return (
    <EzStackMui sx={{ minHeight: '100vh', position: 'relative' }} id='layout'>
      {/* 把scrollY传递给NavBar，保持头部样式联动 */}
      <NavBar scrollY={scrollY} />
      
      {/* 用motion组件包裹Outlet容器，直接绑定滚动状态实现动画 */}
      <motion.div
        style={{
          flex: 1,
          // 根据滚动位置动态计算marginTop，同时添加过渡动画
          marginTop: scrollY >= 100 ? 20 : 0,
          transition: { duration: 0.3, ease: "easeInOut" }
        }}
      >
        <EzStackMui
          sx={{ flex: 1 }}
          component='main'
        >
          <Outlet />
        </EzStackMui>
      </motion.div>

      <Footer />
    </EzStackMui>
  );
}

2. 改造NavBar组件使用传递的scrollY值

在NavBar中利用Framer Motion的useTransform将滚动值转换成样式属性，实现原有头部样式变化逻辑：

import { useTransform } from 'framer-motion';
import { motion } from 'framer-motion';

export default function NavBar({ scrollY }) {
  // 根据滚动位置转换背景色和内边距
  const bgColor = useTransform(scrollY, [0, 100], ['transparent', '#ffffff']);
  const padding = useTransform(scrollY, [0, 100], ['1.5rem 2rem', '1rem 2rem']);

  return (
    <motion.nav
      style={{
        backgroundColor: bgColor,
        padding,
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}
    >
      {/* NavBar的内容，比如logo、导航链接等 */}
    </motion.nav>
  );
}

方案优势 #

• 符合React最佳实践：通过状态提升和props传递实现组件间通信，避免直接操作DOM，代码可维护性更强。
• 充分利用Framer Motion能力：使用响应式scrollY值和useTransform实现平滑的样式过渡动画，比手动修改DOM样式更自然。
• 避免过度设计：无需引入全局状态管理工具，仅在共享状态的父组件中管理滚动逻辑，轻量化解决问题。

内容的提问来源于stack exchange，提问作者luis miguel castro martinez