React - 单击导航菜单中的元素时隐藏组件

Question

当点击导航菜单中的元素时，是否有可能隐藏反应组件？我使用 React 路由器导航到相应的组件。我有一个 Navigation 组件，下面是一个 Header 组件（当我单击 Navigation 中的一个选项时，我想隐藏/删除它），然后是一个应该显示单击内容的 div。我会很感激你的建议。在 scr1 上，您可以看到在单击 Navigation 项之前应用程序的外观以及在 scr2 上发生的情况。我想用图标（）隐藏组件。只有导航和组件应该是可见的。 您将在下面找到必要的代码和屏幕截图。

App.js

import React from 'react';
import './styles/style.css';
import Navigation from './components/Navigation';
import Header from './components/Header';
import Menu from './components/Menu';
import Grammatica from './components/Grammatica'
import GrammaticaElement from './components/GrammaticaElement'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Lessico from './components/Lessico';
import Cultura from './components/Cultura';
import CompetenzeLinguistiche from './components/CompetenzeLinguistiche';
import Prove from './components/Prove';

function App() {
  return (
    <Router>
    <div className="App">
     <Navigation />
      <Header/>
      <Switch>
      <Route exact path="/"/>
      <Route path="/grammatica" component={Grammatica}/>
      <Route path="/lessico" component={Lessico}/>
      <Route path="/cultura" component={Cultura}/>
      <Route path="/competenze-linguistiche" component={CompetenzeLinguistiche}/>
      <Route path="/prove" component={Prove}/>
      </Switch>
      
      {/*
      <Menu />
        */}
      
      
    </div>
    </Router>
  );
}

export default App;

Navigation.js

import React, {useState} from 'react';
import '../styles/style.css';
import {UncontrolledDropdown, Container, Row, Col, Nav, Navbar, NavItem, NavLink, Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from 'reactstrap';
// import './fontawesomelibrary';
import { faHome, faInfo, faBars, faEdit, faPlus, faSpellCheck, faPizzaSlice, faLevelUpAlt, faTrophy, faIdCard } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Grammatica from './Grammatica';
import {Link } from 'react-router-dom';
class Navigation extends React.Component{
    constructor(props){
    super(props);
    this.toggleGr = this.toggleGr.bind(this);
    this.toggleL = this.toggleL.bind(this);
    this.toggleC = this.toggleC.bind(this);
    this.toggleCL = this.toggleCL.bind(this);
    this.toggleP = this.toggleP.bind(this);
    this.state = {
        dropdownOpenGr:false,
        dropdownOpenL:false,
        dropdownOpenC:false,
        dropdownOpenCL:false,
        dropdownOpenP:false
    
    };
}

    toggleGr(){
        this.setState(prevState =>({
            dropdownOpenGr: !prevState.dropdownOpenGr
        }));
    }

    toggleL(){
        this.setState(prevState =>({
            dropdownOpenL: !prevState.dropdownOpenL
        }));
    }
    
    toggleC(){
        this.setState(prevState =>({
            dropdownOpenC: !prevState.dropdownOpenC
        }));
    }
    toggleCL(){
        this.setState(prevState =>({
            dropdownOpenCL: !prevState.dropdownOpenCL
        }));
    }
    toggleP(){
        this.setState(prevState =>({
            dropdownOpenP: !prevState.dropdownOpenP
        }));
    }

    render(){
        return(
            <div>
                <Container fluid="lg">
                    <Row>

                        <Nav className="nav-style">
                            <NavItem className="home"><NavLink href="#"><FontAwesomeIcon className="icon-style" icon={faBars}></FontAwesomeIcon></NavLink></NavItem>
                            <NavItem>
                            <Link to="/" className="nav-bar-labels"><FontAwesomeIcon icon={faHome} className="icon-style"></FontAwesomeIcon>Home</Link></NavItem>
                            <NavItem>
                            <NavLink className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faInfo} className="icon-style"></FontAwesomeIcon>Chi siamo</NavLink></NavItem>
                            <Dropdown isOpen={this.state.dropdownOpenGr} toggle={this.toggleGr}>
                            <NavItem>
                            <Link to="/grammatica" className="nav-bar-labels"><FontAwesomeIcon icon={faEdit} className="icon-style"></FontAwesomeIcon>
                            <DropdownToggle className="nav-bar-labels nav-bar-label-override">
                            Grammatica
                            </DropdownToggle>
                            </Link>
                            <DropdownMenu>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Spiegazioni</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Prove</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Esercizi</DropdownItem>
                            </DropdownMenu> 
                            </NavItem>
                            </Dropdown>
                            
                            <Dropdown isOpen={this.state.dropdownOpenL} toggle={this.toggleL}>
                            <NavItem>
                            <Link to="/lessico" className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faSpellCheck} className="icon-style"></FontAwesomeIcon>
                            <DropdownToggle className="nav-bar-labels nav-bar-label-override">Lessico</DropdownToggle>
                            </Link>
                            <DropdownMenu>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Situzaioni</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Prove</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Esercizi</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Vocabolario illustrato</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Modi di dire</DropdownItem>
                            </DropdownMenu> 
                            </NavItem>
                            </Dropdown>
                            
                            <Dropdown isOpen={this.state.dropdownOpenC} toggle={this.toggleC}>
                            <NavItem>
                            <Link to="/cultura" className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faPizzaSlice} className="icon-style"></FontAwesomeIcon>
                            <DropdownToggle className="nav-bar-labels nav-bar-label-override">Cultura</DropdownToggle>
                            </Link>
                            <DropdownMenu>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Civiltà italiana</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>La cucina italiana</DropdownItem>
                            </DropdownMenu> 
                            </NavItem>
                            </Dropdown>
                            
                            <Dropdown isOpen={this.state.dropdownOpenCL} toggle={this.toggleCL}>
                            <NavItem>
                            <Link to="/competenze-linguistiche" className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faLevelUpAlt} className="icon-style"></FontAwesomeIcon>
                            <DropdownToggle className="nav-bar-labels nav-bar-label-override">Competenze linguistiche</DropdownToggle>
                            </Link>
                            <DropdownMenu>
                                <DropdownItem href="#" className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Prove di grammatica</DropdownItem>
                                <DropdownItem href="#" className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Compressione scritta</DropdownItem>
                                <DropdownItem href="#" className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Situazioni di communicazione</DropdownItem>
                                <DropdownItem href="#"className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Esercizi di riodinamento di testi</DropdownItem>
                            </DropdownMenu> 
                            </NavItem>
                            </Dropdown>

                            <Dropdown isOpen={this.state.dropdownOpenP} toggle={this.toggleP}>
                            <NavItem>
                            <Link to="/prove" className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faTrophy} className="icon-style"></FontAwesomeIcon>
                            <DropdownToggle className="nav-bar-labels nav-bar-label-override">Prove</DropdownToggle>
                            </Link>
                            <DropdownMenu>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Prova il tuo italiano</DropdownItem>
                                <DropdownItem className="dropdown-item-style"><FontAwesomeIcon icon={faPlus} className="icon-style"></FontAwesomeIcon>Quanto siete bravi in italiano?</DropdownItem>
                            </DropdownMenu> 
                            </NavItem>
                            </Dropdown>

                            <NavItem>
                            <NavLink className="nav-bar-labels" href="#"><FontAwesomeIcon icon={faIdCard} className="icon-style"></FontAwesomeIcon>Contattaci</NavLink></NavItem>
                            <NavItem></NavItem>
                        </Nav>
                    </Row>
                </Container>
                
            </div>
        );
    }
}

export default Navigation;

Answer 1

您可以将Header 组件传递给/ 路径路由，因为它是组件属性，如下所示：

<Route exact path="/" component={Header}/>

这样它只会在您位于主页时显示（在/ 路线上）。 生成的App.js 应该是这样的-

<div className="App">
     <Navigation />
      <Switch>
      <Route exact path="/" component={Header}/>
      <Route path="/grammatica" component={Grammatica}/>
      <Route path="/lessico" component={Lessico}/>
      <Route path="/cultura" component={Cultura}/>
      <Route path="/competenze-linguistiche" component={CompetenzeLinguistiche}/>
      <Route path="/prove" component={Prove}/>
      </Switch>
      
      {/*
      <Menu />
        */}
      
      
</div>