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

如何解决反应-单击导航菜单中的元素时隐藏组件

单击导航菜单中的元素时，是否有可能隐藏反应组件？我使用React路由器导航到相应的组件。我有一个Navigation组件，下面是Header组件（当我单击Navigation中的一个选项时，我想隐藏/删除），然后是一个div，其中应显示单击的内容。感谢您的建议。在scr1上，您可以查看该应用程序的外观，然后单击“导航”项，然后单击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;

解决方法

您可以将 func (n *Node) Start(up chan struct{}) { lis,err := net.Listen("tcp",port) if err != nil { log.Fatalf("failed to listen: %v",err) } if up != nil { close(up) } s := grpc.NewServer() thing.RegisterGreeterServer(s,n) if err := s.Serve(lis); err != nil { log.Fatalf("failed to serve: %v",err) } } func main() { n := Node{Table: map[string]string{}} up := make(chan struct{}) go n.Start(up) <-up conn,err := grpc.Dial("localhost:50051",grpc.WithInsecure(),grpc.WithBlock()) } 组件传递给 Header 路径 Route，因为它是组件 prop，如下所示：

/

这样它只会在您位于主页上时显示（在 <Route exact path="/" component={Header}/> 路线上）。 结果 / 应该是这样的-

App.js