如何通过NavigationBar按钮识别点击项以切换页面特定元素显示

Got it, let's sort this out for you. The core problem right now is that your NavigationBar component isn't passing any specific identifier back to the Home page when a button is clicked—you just get a generic alert, so Home has no idea which section to show. Here's a straightforward fix that'll get your filtering working:

Step 1: Update NavigationBar to pass section identifiers on click #

Modify your NavigationBar to send a unique identifier (like a string naming the section) to the parent Home component whenever a button is clicked. We'll use a callback prop for this:

// NavigationBar.jsx
import React from 'react';

const NavigationBar = ({ onSelectSection }) => {
  // Handle click and pass the section name to the parent
  const handleButtonClick = (section) => {
    onSelectSection(section);
    // You can remove the old alert or replace it with a console log for testing
    // alert(`Selected ${section}`);
  };

  return (
    <div className="navigation-bar">
      <div onClick={() => handleButtonClick('home')}>Home</div>
      <div onClick={() => handleButtonClick('profile')}>Profile</div>
      <div onClick={() => handleButtonClick('messages')}>Messages</div>
      <div onClick={() => handleButtonClick('settings')}>Settings</div>
    </div>
  );
};

export default NavigationBar;

Step 2: Track active section in Home component and render content conditionally #

In your Home page, use React state to keep track of which section is active. Then, use that state to conditionally render only the matching div:

// Home.jsx
import React, { useState } from 'react';
import NavigationBar from './NavigationBar';

const Home = () => {
  // Set default active section (e.g., 'home' to show it first)
  const [activeSection, setActiveSection] = useState('home');

  // Update the active section when NavigationBar sends a selection
  const handleSectionSelect = (section) => {
    setActiveSection(section);
  };

  return (
    <div className="home-container">
      {/* Pass the callback to NavigationBar */}
      <NavigationBar onSelectSection={handleSectionSelect} />
      
      {/* Conditionally render content based on activeSection */}
      {activeSection === 'home' && <div className="section">Home Section Content</div>}
      {activeSection === 'profile' && <div className="section">Profile Section Content</div>}
      {activeSection === 'messages' && <div className="section">Messages Section Content</div>}
      {activeSection === 'settings' && <div className="section">Settings Section Content</div>}
    </div>
  );
};

export default Home;

Optional: Add active button styling (for better UX) #

To make it clear which button is selected, you can pass the activeSection back to NavigationBar and apply a CSS class to the active button:

Update NavigationBar to accept the activeSection prop:

const NavigationBar = ({ onSelectSection, activeSection }) => {
  const handleButtonClick = (section) => {
    onSelectSection(section);
  };

  return (
    <div className="navigation-bar">
      <div 
        onClick={() => handleButtonClick('home')}
        className={activeSection === 'home' ? 'nav-button active' : 'nav-button'}
      >Home</div>
      <div 
        onClick={() => handleButtonClick('profile')}
        className={activeSection === 'profile' ? 'nav-button active' : 'nav-button'}
      >Profile</div>
      {/* Repeat for messages and settings buttons */}
    </div>
  );
};

Then add some basic CSS:

.nav-button {
  padding: 8px 16px;
  cursor: pointer;
}

.nav-button.active {
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

This works because we're using props to communicate between parent and child: the Home component holds the state of which section is active, and tells NavigationBar which button to highlight. When a button is clicked, NavigationBar sends the section name back to Home, which updates the state and re-renders the correct content.

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