Question

我在使用我的NextJS应用程序时遇到了Redux中的操作问题。我想它在任何其他React应用程序中实现Redux都相对类似但是我不能在我的生活中得到我的行动开火自从我接触Redux以来已经有一段时间了，所以它可能是一个非常明显的东西，我错过了，但我花了几个小时试图解决它。当我的窗口宽度达到600px时，我有一个断点，显示一个汉堡图标，我希望它将类“open”添加到我的导航栏。这是我的回购。 https://github.com/nicer00ster/nicer00ster-blog

Answer 1

添加eventListener来处理窗口大小调整，然后检查innerWidth中的window来调用您的操作。


import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { toggleMenu } from '../../actions'
import Sidebar from './Sidebar';

import Nicer00ster from '-!svg-react-loader?name=Nicer00ster!../../images/svg/nav/nicer00ster.svg';
import Smartphone from '-!svg-react-loader?name=Smartphone!../../images/svg/nav/smartphone.svg';
import House from '-!svg-react-loader?name=House!../../images/svg/nav/house.svg';
import Telephone from '-!svg-react-loader?name=Telephone!../../images/svg/nav/telephone.svg';


class Navbar exntends React.Component {
  constructor() {
    super();
    this.onWindowResize = this.onWindowResize.bind(this);
  }
  componentDidMount() {
      window.addEventListener('resize', onWindowResize);
   }
   onWinodwResize() {
    if (window.innerWidth < 600 && !this.props.isOpen)
      this.props.toggleMenu();
    }
  render() {
   const {isOpen, toggleMenu} = this.props;
   return (
    <div>
      <div className={ isOpen ? "navbar open" : "navbar" }>
          <ul className="navbar__links">
            <li className="navbar__item">
              <Link to="/">
                <Nicer00ster className="logo" width={200} height={100}/>
              </Link>
              <Sidebar />
            </li>
          </ul>
          <ul className="navbar__navigation">
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/">
                <a className="navbar__link">
                  <House className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Home</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/blog">
                <a className="navbar__link">
                  <Telephone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Blog</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/work">
                <a className="navbar__link">
                  <Smartphone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Work</span>
                </a>
              </Link>
            </li>
            <li className="navbar__item" onClick={ toggleMenu }>
              <Link activeClassName="active" to="/contact">
                <a className="navbar__link">
                  <Telephone className="navbar__item--svg" width={100} height={50} />
                  <span className="navbar__item--text">Contact</span>
                </a>
              </Link>
            </li>
          </ul>
      </div>
      <Sidebar isOpen={isOpen} />
    </div>
  )
}

export default connect(function(state) {
  return { isOpen: state.app.open }
}, { toggleMenu })(Navbar);

NextJS中的Redux

1 个答案: