在此侧边栏中，按钮未加载我想要的正确内容页面。而是什么也不做。我不明白为什么。感谢帮助

Question

以下是我用来构建侧边栏 UI 的相关组件。一切都显示良好。但是内容页面的加载以及如何连接Content.jsx和SideNavBar.jsx才能完美显示是相当麻烦的。

1。 SideBarButton.jsx - 用于侧边栏的按钮

import React from "react";
import styled from "styled-components";
import { colors } from "../../assets/colorPalette"; // Assuming you have a file for colors

const SideBarButton = ({ onClick, icon, title }) => {
  return (
    <li>
      <ButtonSidebar onClick={onClick}>
        <Icon>{icon}</Icon>
        {title}
      </ButtonSidebar>
    </li>
  );
};

const ButtonSidebar = styled.div`
  position: relative;
  
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: left;

  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;

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

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

const Icon = styled.div`
  margin-right: 15px;
  margin-left: 20px;
  height: 24px;
`
export default SideBarButton;

2。 SideNavbar.jsx - 这是使用上述 SidebarButton 组件构建的侧边栏。

import React from "react";
import styled from "styled-components"; // Import styled-components only once
import SideBarButton from "./SideNavBarLinks";

import { colors } from "../../assets/colorPalette";
import dashboard from "../../assets/dashboard.svg";
import patient from "../../assets/patient.svg";
import messages from "../../assets/messages.svg";
import visits from "../../assets/visits.svg";

const SideNavbar = ({onSideNavBarClick}) => {
    const handleClick = (page) => {
        onSideNavbarClick(page)
    }
    return (
        <SidebarWrapper>
            <SidebarBody>
                <UnorderedList>
                    {makeButtons.map((btn, i) => (
                        <SideBarButton onClick = {() => handleClick(btn.title)}
                            to={btn.to}
                            icon={btn.icon}
                            title={btn.title}
                            key={i}
                        />
                    ))}
                </UnorderedList>
            </SidebarBody>
        </SidebarWrapper>
    );
};

const makeButtons = [
    {
        to: "/DoctorDashboard",
        icon: <img src={dashboard} alt="dashboard" />,
        title: "Dashboard",
    },
    {
        to: "/Patients",
        icon: <img src={patient} alt="patient" />,
        title: "Patients",
    },
    {
        to: "/Appointments",
        icon: <img src={visits} alt="appointments" />,
        title: "Appointments",
    },
    {
        to: "/Visits",
        icon: <img src={messages} alt="messages" />,
        title: "Visits",
    },
];

const SidebarWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: ${colors.SurfContainer};
  z-index: 2;
  transition: transform 0.3s ease-in-out;
`;

const SidebarBody = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-top: 20px;
`;

const UnorderedList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  display:inline-block;
  width: 100%;
`;

export default SideNavbar;

3. Content.jsx - 此页面加载与侧栏按钮相关的内容。

import React from 'react';
import DashboardPage from '../../pages/Doctor/DashboardPage';
import PatientsPage from '../../pages/Doctor/PatientsPage';
import VisitsPage from '../../pages/Doctor/VisitsPage';
import AppointmentsPage from '../../pages/Doctor/AppointmentsPage';
import styled from 'styled-components';

const Content = ({ selectedPage }) => {
  const renderPage = () => {
    switch (selectedPage) {
      case 'Dashboard':
        return <DashboardPage />;
      case 'Patients':
        return <PatientsPage />;
      case 'Appointments':
        return <AppointmentsPage />;
      case 'Visits':
        return <VisitsPage />;
      default:
        // Throw an error for invalid pages
        throw new Error(`Invalid page: ${selectedPage}`);
    }
  };

  return (
    <ContentContainer>{renderPage()}</ContentContainer>
  );
}

const ContentContainer = styled.div`
    display: flex;
    padding: 20px;
`
export default Content;

4。 DoctorsUI.jsx - 这是最终页面，它是侧边栏和内容组件的总和。它显示正确。但内容页面无法正确加载。

import React, { useState } from "react";
import styled from "styled-components";
import SideNavBar from "../../components/Doctor/SideNavbar";
import Content from "../../components/Doctor/Content";

const DoctorsUI = () => {
  // State to manage the selected page
  const [selectedPage, setSelectedPage] = useState("Dashboard");

  // Function to handle sidebar button click
  const handleSideNavClick = (page) => {
    setSelectedPage(page);
  };

  return (
    <Wrapper>
      <SidebarWrapper>
        {/* Pass the handleSideNavClick function to SideNavBar */}
        <SideNavBar onSideNavBarClick={{handleSideNavClick}} />
      </SidebarWrapper>
      {/* Pass the selectedPage state to Content */}
      <ContentWrapper>
        <Content selectedPage={selectedPage} />
      </ContentWrapper>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: flex;
`;

const SidebarWrapper = styled.div`
  // add suitable styles for a side navigation bar wrapper
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  transition: transform 0.3s ease-in-out;
`;

const ContentWrapper = styled.div`
  // add suitable styles for a content wrapper
  flex: 1;
  margin-left: 270px;
  padding: 20px;
`;

export default DoctorsUI;

作为一名新人，我尽了一切努力，我观看了 YT 视频，询问了 GPT，花了大约 3 天的时间，但我什么也没得到，但我正在尽力而为。

Answer 1

问题

看起来您正在将具有

handleSideNavClick

属性的对象传递给

SideNavBar

的

onSideNavBarClick

属性，例如

onSideNavBarClick={{ handleSideNavClick }}

。

<SideNavBar onSideNavBarClick={{ handleSideNavClick }} />

我怀疑您在尝试调用传递的

onSideNavBarClick

属性时应该在浏览器控制台中看到错误，例如它不是一个函数。

const SideNavbar = ({ onSideNavBarClick }) => {
  const handleClick = (page) => {
    onSideNavbarClick(page); // <-- not a function, `{ handleSideNavClick }`
  };

  ...
};

解决方案

要解决此问题，您只需传递

handleSideNavClick

as

onSideNavBarClick

值即可。

<SideNavBar onSideNavBarClick={handleSideNavClick} />

const SideNavbar = ({ onSideNavBarClick }) => {
  const handleClick = (page) => {
    onSideNavbarClick(page); // <-- a function, `handleSideNavClick`
  };

  ...
};

或

const SideNavbar = ({ onSideNavBarClick }) => {
  return (
    <SidebarWrapper>
      <SidebarBody>
        <UnorderedList>
          {makeButtons.map(({ title, ...btn}, index) => (
            <SideBarButton
              key={index}
              onClick={() => onSideNavBarClick(title)} // <-- use directly
              {...btn}
            />
          ))}
        </UnorderedList>
      </SidebarBody>
    </SidebarWrapper>
  );
};