Question

我有一个侧面抽屉导航组件，当单击一个汉堡图标（移动视图）时会打开。

打开组件后，它将显示导航链接。问题是，即使单击链接并加载新页面，抽屉也保持打开状态。单击导航链接时，关闭侧面导航的最佳方法是什么？编辑：将componentDidUpdate添加到app.js，侧面抽屉仍无法关闭

//side-drawer.jsx

import React from 'react'
import './side-drawer.css'
import { Link } from 'react-router-dom';

const SideDrawer = props => {

    let drawerClasses = 'side-drawer';
    if (props.show){
        drawerClasses = 'side-drawer open';
    }

    return(
    <nav className={drawerClasses}>
        <div className="side-nav">
            <Link className="side-items" to="/about">ABOUT</Link>
            <Link className="side-items" to="/contact">CONTACT US</Link>
        </div>
    </nav>
    );
};

export default SideDrawer;

//app.js
class App extends React.Component {
  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return {sideDrawerOpen: !prevState.sideDrawerOpen};
    });
  };


  componentDidUpdate(prevProps) {
  const { location } = this.props;
  if (location !== prevProps.location && this.state.sideDrawerOpen) {
    this.setState({ sideDrawerOpen: false });
  }
}

render(){

 return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
      <SideDrawer show={this.state.sideDrawerOpen}/>

        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );
  }
}

//.side-drawer.css
.side-drawer {
    height: 100%;
    background: linen;
    box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    max-width: 400px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    
  }

.side-drawer.open{
    transform: translateX(0);
}

    .side-nav{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }  

    .side-items {
        margin: 0.5rem auto;
        
    }

    .side-items:hover{
        text-decoration-line: overline underline;
        color: #99bbff; 
        }

@media (min-width: 769px){
    .side-drawer-open{
        display: none;
    }
}

Answer 1

好吧，如果您有条件地将类名应用于SideDrawer组件，则可以改为...

<nav className={props.show ? 'side-drawer open' : 'side-drawer'}>

或者您可以通过...有条件地在App组件中显示该组件。

return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
        {
          this.state.sideDrawerOpen && <SideDrawer />
        }
        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );

Answer 2

这是完整的解决方案。

您需要一个特定的处理程序来关闭sideDrawer和一些CSS更改。

sideDrawer.js

import React from "react";
import style from "./side-drawer.module.css";
import { Link } from "react-router-dom";

const SideDrawer = (props) => {
  let drawerClasses = [style.sideDrawer, style.Close];
  if (props.show) {
    drawerClasses = [style.sideDrawer, style.Open];
  }

  return (
    <div className={drawerClasses.join(" ")}>
      <div className={style.sideNav}>
        <Link
          to="/about"
          // className={style.Items}
          onClick={props.closed}
          style={{ textDecoration: "none", color: "black" }}
        >
          ABOUT
        </Link>

        <Link
          to="/contact"
          // className={style.Items}
          onClick={props.closed}
          style={{ textDecoration: "none", color: "black" }}
        >
          CONTACT US
        </Link>
      </div>
    </div>
  );
};
export default SideDrawer;

App.js

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import SideDrawer from "./sideDrawer";
import { Homepage, About, Contact } from "./Components";
import Header from "./Header";

class App extends Component {
  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };

  drawerClosedHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    return (
      <div style={{ height: "100%" }}>
        <Header drawerClickHandler={this.drawerToggleClickHandler} />
        <SideDrawer
          show={this.state.sideDrawerOpen}
          closed={this.drawerClosedHandler}
        />

        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
        {/* <footer /> */}
      </div>
    );
  }
}
export default App;

side-drawer.module.css

module.css，因为在sideDrawer.js中使用了连接功能

.sideDrawer {
  position: fixed;
  width: 700px;
  max-width: 80%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 600;
  background-color: white;
  box-sizing: border-box;
  transition: transform 0.3s ease-out;
  background-color: yellow;
}

@media (min-width: 900px) {
  .sideDrawer {
    display: none;
  }
}

.sideNav a{
  border: 1px solid black;
  margin: 200px 30px ;
}


.Open {
  transform: translateX(0);
}
.Close {
  transform: translateX(-100%);
}

full source code

侧抽屉未关闭

2 个答案: