我想改变菜单的状态，当路由改变，但不能使它工作。
我面临的问题是：当我点击Navbar中的链接时。路线改变了，但它不会关闭。当路线更改时，如何更改菜单状态？react-router-redux能帮我吗？
行动
export function menuToggle(currentState) {
return {
type: 'MENU_TOGGLE',
payload: {
ToggleMenu: !currentState,
},
};
}
减速器
const initialState = {
showMenu: false,
};
export const MenuToggle = (state = initialState, action) => {
switch (action.type) {
case MENU_TOGGLE:
return {
showMenu: action.payload.ToggleMenu,
};
default:
return state;
}
};
组件
class Header extends Component {
componentWillMount() {
document.addEventListener('click', this.handleClickOutside, false);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, false);
}
handleClickOutside = e => {
if (!ReactDOM.findDOMNode(this).contains(e.target)) {
this.props.showMenu === true && this.props.menuToggle(!false);
}
};
render() {
return (
<Head>
<Brand>BRAND</Brand>
<MenuButton
onClick={this.props.menuToggle.bind(null, this.props.showMenu)}
>
MENU
</MenuButton>
<MobileMenu showMenu={this.props.showMenu} />
</Head>
);
}
}
const mapStateToProps = state => {
return {
showMenu: state.MenuToggle.showMenu,
};
};
const mapDispatchToProps = { menuToggle };
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Header);
子组件
const MobileMenu = ({ showMenu }) => {
return (
showMenu === true && (
<Nav>
<Ul>
<Li>
<A to="/">
<Span>Home</Span>
</A>
</Li>
<Li>
<A to="/shop">
<Span>Shop</Span>
</A>
</Li>
<Li>
<A to="/contact">
<Span>Contact</Span>
</A>
</Li>
</Ul>
</Nav>
)
);
};
export default MobileMenu;
是的，react-router-redux可以帮助你。你可以在减速器中监听LOCATION_CHANGE并关闭“showmenu”。
