React侧边栏按钮无法加载对应内容页面问题求助

你的代码存在3个关键错误，导致点击侧边栏按钮后无任何反应，逐个修复即可解决问题：

1. 父组件传递回调函数错误包裹为对象 #

在DoctorsUI.jsx中，你将回调函数用对象包裹传递给子组件，导致子组件无法正确调用：

错误代码：

<SideNavBar onSideNavBarClick={{handleSideNavClick}} />

修复后：直接传递函数本身

<SideNavBar onSideNavBarClick={handleSideNavClick} />

2. 子组件调用回调函数时拼写错误 #

在SideNavbar.jsx中，props接收的参数是onSideNavBarClick，但你调用时写成了onSideNavbarClick（注意NavBar与Navbar的大小写差异）：

错误代码：

const handleClick = (page) => {
    onSideNavbarClick(page)
}

修复后：修正函数名拼写

const handleClick = (page) => {
    onSideNavBarClick(page)
}

3. SideBarButton组件导入路径错误 #

在SideNavbar.jsx中，你导入SideBarButton时使用了错误的路径，实际组件文件名为SideBarButton.jsx：

错误代码：

import SideBarButton from "./SideNavBarLinks";

修复后：修正导入路径

import SideBarButton from "./SideBarButton";

可选优化：提升组件语义化 #

SideBarButton中的ButtonSidebar使用了div元素，虽然能绑定点击事件，但改用button元素更符合语义化规范，同时可以简化样式：

// SideBarButton.jsx
const ButtonSidebar = styled.button`
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  background: transparent;
  border: none;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  font-weight: 350;
  transition: all 0.2s ease-in;
  color: ${colors.onSecContainer};
  height: 70px;
  cursor: pointer;

  &:hover {
    background: ${colors.SurfContainer_highest};
  }

  &.active {
    background: ${colors.secContainer};
    color: ${colors.onPrimContainer};
    transition: all 0.4s ease-in-out;
    font-weight: 400;
  }
`;

修复完以上三个关键错误后，侧边栏按钮点击会正常触发selectedPage状态更新，Content组件也会随之渲染对应的页面。

内容的提问来源于stack exchange，提问作者Retarded Dev