如何将解构后的元素逐个传入scrollDown()函数？

核心思路 #

通过建立导航项与目标section的映射关系，遍历导航菜单时根据当前项的标识匹配对应的section引用，再传入scrollDown方法实现精准滚动。

步骤1：确认navItems数据结构 #

假设你的data.js中navItems的funcName字段是区分不同section的标识（比如"about"对应About，"services"对应Services），结构示例：

// data.js
export const navItems = [
  { id: 1, text: "Home", funcName: "home" },
  { id: 2, text: "About", funcName: "about" },
  { id: 3, text: "Services", funcName: "services" },
  // 其他导航项...
];

步骤2：在NavBar组件中创建section映射 #

将传入的aboutSection和servicesSection与导航标识绑定：

export const NavBar = ({aboutSection,servicesSection}) => {
  // ... 其他状态、方法
  const {scrollDown}=useContext(AppContext);

  // 导航标识 → section引用的映射
  const sectionRefMap = {
    about: aboutSection,
    services: servicesSection
  };

  // ... 其他代码
};

步骤3：修改导航项点击事件 #

遍历导航项时，根据funcName从映射中取出对应section，传入scrollDown：

<ul className={isactive ? "menu active" : "menu"}>
  {navItems.map((item) => {
    const { id, text, funcName} = item;                
    return (
      <li 
        key={id} 
        onClick={() => {
          // 获取当前导航项对应的section引用
          const targetSection = sectionRefMap[funcName];
          // 存在有效section时执行滚动
          if (targetSection) {
            scrollDown(targetSection);
          }
          // 可选：点击后关闭侧边栏
          closeSideBar();
        }} 
      >
        <a>{text}</a>
      </li>
    );
  })}
</ul>

步骤4：确保scrollDown方法支持参数 #

确认AppContext中的scrollDown能接收section引用并执行滚动，示例实现：

// context.js
import { createContext, useContext } from "react";

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const scrollDown = (sectionRef) => {
    if (sectionRef.current) {
      sectionRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start" // 可选：控制滚动对齐位置
      });
    }
  };

  return (
    <AppContext.Provider value={{ scrollDown }}>
      {children}
    </AppContext.Provider>
  );
};

export { AppContext };

关键注意事项 #

• 确保aboutSection和servicesSection是父组件通过useRef创建的DOM引用，再传递给NavBar组件。
• 若有其他无需滚动的导航项，只需不在映射中添加对应key，点击时会自动跳过滚动逻辑。
• 点击后关闭侧边栏为可选操作，可根据你的交互需求决定是否保留。

内容的提问来源于stack exchange，提问作者Usama BG