Question

我有这个父组件只是简单地呈现一个＆＃39; p＆＃39;介绍文本和名为＆＃39; PortfolioMenu＆＃39;

的子组件

import React from 'react'
import PortfolioMenu from './PortfolioMenu'

const Portfolio = () => {
  return (
  <div className="wrapper2">     
    <p>
      Here is an Introduction text 
    </p> 
  <PortfolioMenu/>
  </div>   
 )
}
export default Portfolio

现在在子组件＆＃39; PortfolioMenu＆＃39;中，当我点击NavLink的某个链接时，我想制作＆＃39; p＆＃39;父组件＆＃39; Portfolio＆＃39;消失。我该如何解决？谢谢

import React from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import Houses from './Houses'
import Interiors from './Interiors'   

const PortfolioMenu = () => {

return (
  <div>
    <Router>
      <div class="wrapper2">
        <div className="wrapper-portfolio">
          <Route exact path='/portfolio/houses' render={() => <Houses />} />
          <Route exact path='/portfolio/interiors' render={() =><Interiors/>}  
          />          
      </div>
      <nav>
        <ul className="portfolio-menu">
          <li><NavLink activeClassName="active" exact 
           to="/portfolio/houses">Houses</NavLink></li>
          <li><NavLink activeClassName="active" exact 
          to="/portfolio/interiors">interiors</NavLink></li>             
         </ul>
        </nav>
      </div>
    </Router>
   </div>
 )
}
export default PortfolioMenu

Answer 1

您可以使用解决方案

import React from 'react'
import PortfolioMenu from './PortfolioMenu'

const Portfolio = () => {
  
  constructor(props) {
    super(props){
      this.state = {
        visibleP: true
      };
    }
    
    this.handleMenuClick = this.handleMenuClick.bind(this);
  }
  
  handleMenuClick() {
    this.setState({
      visibleP: false
    });
  }

  return (
  <div className="wrapper2"> 
    {
      this.visibleP &&
      <p>
        Here is an Introduction text 
      </p> 
    }
  <PortfolioMenu onHandleMenuClick={this.handleMenuClick}/>
  </div>   
 )
}


import React from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import Houses from './Houses'
import Interiors from './Interiors'   

const PortfolioMenu = () => {

return (
  <div>
    <Router>
      <div class="wrapper2">
        <div className="wrapper-portfolio">
          <Route exact path='/portfolio/houses' render={() => <Houses />} />
          <Route exact path='/portfolio/interiors' render={() =><Interiors/>}  
          />          
      </div>
      <nav>
        <ul className="portfolio-menu">
          <li>
            <NavLink
              activeClassName="active"
              exact 
              to="/portfolio/casas"
              onClick={this.props.onHandleMenuClick()}
            >
              casas
            </NavLink>
          </li>
          <li>
            <NavLink
              activeClassName="active"
              exact 
              to="/portfolio/interiores"
              onClick={this.props.onHandleMenuClick()}
            >
              interiores
            </NavLink>
          </li>             
         </ul>
        </nav>
      </div>
    </Router>
   </div>
 )
}

PortfolioMenu.propTypes = {
  onHandleMenuClick: PropTypes.func
};

export default PortfolioMenu;

您不能拥有转储组件。在这里，您需要将子组件中的道具传递给父组件。

React JS - 通过单击NavLink隐藏父组件的文本

1 个答案: