单击链接时，activeClassName 在 sideMenu 上不起作用 [英] activeClassName does not work on the sideMenu when clicking on the link

问题描述

我有一个侧边栏菜单，它导入一个包含菜单项列表的子组件.我想将 activeClassName 设置为子组件 中的每个 .但是，活动链接仅适用于页面加载.

import React, { Component } from 'react';从 './SideMenu/SideMenuContainer' 导入 SideMenuContainer；导出默认类 CompanyInfoMenu 扩展组件 {构造函数(){极好的();this.toggleShow = this.toggleShow.bind(this);this.state = {isShow:假，};}切换显示(){this.setState({ isShow: !this.state.isShow });}使成为() {返回 (<div><ul><li><span onClick={() =>this.toggleShow()}>button</span>{this.state.isShow ?<ul><SideMenuContainer/></ul>:<div></div>}

);}}

路由看起来像这样

<Route path="client-info" component={ClientInfoSection}><IndexRedirect to="BasicInformation"/><Route path=":itemType" component={ItemContentContainer}/><Route path="company-introduction" component={CompanyInformationContainer}/></路线>

当 :itemType 改变时，activeClassName 不适用.

看起来像这样

返回 (<ul><li><链接to={`/client-info/${item.itemType}`}活动类名=活动">项目 1</链接>);

解决方案

这是 react-router v2.xx 中动态路由的已知错误:https://github.com/ReactTraining/react-router/issues/3286

要使路由正常工作，您应该将 { pure: false } 添加到 connect() 参数:

export default connect(mapStateToProps,mapDispatchToProps，空值，{ pure: false })(SideMenuContainer);

I have a sidebar menu which imports a child component containing a list of menu items. I want to set the activeClassName to each of the <Link /> in the child component <SideMenuContainer />. However, the active link only works on the page load.

import React, { Component } from 'react';
import SideMenuContainer from './SideMenu/SideMenuContainer';

export default class CompanyInfoMenu extends Component {

  constructor() {
    super();
    this.toggleShow = this.toggleShow.bind(this);
    this.state = {
      isShow: false,
    };
  }

  toggleShow() {
    this.setState({ isShow: !this.state.isShow });
  }

  render() {
    return (
      <div>   
        <ul>
          <li>
            <span onClick={() => this.toggleShow()}>button</span>
            {this.state.isShow ? <ul><SideMenuContainer /></ul> : <div></div>}
          </li>
        </ul>
      </div>
    );
  }
}

The routing looks like this

<IndexRedirect to="client-info" />
<Route path="client-info" component={ClientInfoSection}>
  <IndexRedirect to="BasicInformation" />
  <Route path=":itemType" component={ItemContentContainer} />
  <Route path="company-introduction" component={CompanyInformationContainer} />
</Route>

When the :itemType changes, the activeClassName doesn't apply.

The <SideMenuContainer /> looks like this

return (
  <ul>
      <li>
        <Link
          to={`/client-info/${item.itemType}`}
          activeClassName="active"
        >
          item1
        </Link>
      </li>
  </ul>
);

解决方案

This is known bug for dynamic routes in react-router v2.x.x: https://github.com/ReactTraining/react-router/issues/3286

To get the routes work properly you should add { pure: false } to the connect() parameters:

export default connect(mapStateToProps,
                       mapDispatchToProps,
                       null,
                       { pure: false })(SideMenuContainer);

这篇关于单击链接时，activeClassName 在 sideMenu 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！