Question

我正在尝试在React Redux中创建自己的汉堡菜单。但是它有一些问题使它无法渲染。这是我的actions.js：

const TOGGLE_MENU = 'TOGGLE_MENU';

export const toggleMenu = () => {
  return {
    type: TOGGLE_MENU
  };
};

这是我的burgerMenu.js-减速器：

const burgerMenu = (state = { isToggled: false }, action) => {
  switch (action.type) {
    case TOGGLE_MENU:
        return { isToggled: !state.isToggled };
    default:
        return state;
  }
}

export default burgerMenu;

BurgerMenuContainer.js-容器组件：

import BurgerMenu from './BurgerMenu'
import { toggleMenu } from '../actions';

const mapStateToProps = state => {
  return { isToggled: state.isToggled };
};

const mapDispatchToProps = dispatch => {
  return { onClick: () => dispatch(toggleMenu()) };
};

export default connect(mapStateToProps, mapDispatchToProps)(BurgerMenu);

BurgerMenu.js-表示部分：

const BurgerMenu = ({ isToggled, onClick }) => (
    <div onClick={ onClick } className={isToggled ? "burger-menu" : "burger-menu menu-on"}>
        <div className="burger"></div>  
    </div>
);

BurgerMenu.propTypes = {
  onClick: PropTypes.func.isRequired,
  isToggled: PropTypes.bool.isRequired
};

export default BurgerMenu;

Header.js包含Burger Menu容器：

import BurgerMenuContainer from './BurgerMenuContainer';

const Header = (props) => {
  return (
  <header className="header">
    <BurgerMenuContainer/>
  </header>);
}

export default Header;

带有React Redux的汉堡菜单不起作用

0 个答案: