React侧边栏按钮重复接收Prop且取值异常问题求助

核心问题：Prop名称大小写不匹配 #

你代码里存在一个大小写拼写错误，导致子组件无法正确接收isOpenSideNav的值：

• 在NavigationLinksView组件中，传递给SideBarButton和SideBarButtonWithSubMenu的prop是isOpensideNav（注意Side的s是小写）
• 但SideBarButton组件接收的prop是isOpenSideNav（Side的S是大写）

因为React的prop是大小写敏感的，所以子组件实际接收到的isOpenSideNav是undefined，在布尔判断中undefined会被当作false，这就是为什么无论父组件状态如何，子组件始终取false的原因。

修复步骤 #

1. 统一Prop名称：将NavigationLinksView中传递的isOpensideNav全部改为isOpenSideNav，保持和父组件传递、子组件接收的名称一致：

// NavigationLinksView组件内修改后：
if (sideMenuContent) {
  return (
    <SideBarButtonWithSubMenu
      key={`${name}_${idx}`}
      isOpenSideNav={isOpenSideNav} // 修正大小写
      navigationItem={navigationItem}
    />
  );
}
return (
  <SideBarButton
    key={`${name}_${idx}`}
    isOpenSideNav={isOpenSideNav} // 修正大小写
    navigationItem={navigationItem}
  />
);

2. 同步检查SideBarButtonWithSubMenu：确保SideBarButtonWithSubMenu组件的prop接收也是isOpenSideNav，避免同样的拼写错误。

额外排查点 #

• 确认父组件的isOpenSideNav状态确实在正确更新：可以在父组件中添加console.log(isOpenSideNav)，验证展开/收起时状态是否切换。
• 检查子组件是否有默认prop值：如果SideBarButton给isOpenSideNav设置了默认值false，也会导致即使prop传递正确，初始值可能不符合预期，可根据需求调整默认值。

关于渲染树中显示两次的说明 #

父组件渲染了两个NavigationLinksView（navigationLinksTop和navigationLinksBottom），如果这两个列表中包含相同的导航项，或者各自都有导航项，那么SideBarButton会被渲染多次，这属于正常的组件复用，并非bug，修复prop拼写问题后，这些组件都会正确接收状态值。

内容的提问来源于stack exchange，提问作者Jonatan Kruszewski