router V4 map后的navLink 添加activeClassName 无效

Question

router V4 map后的navLink 添加activeClassName 无效

没有有经过循环渲染的navLink添加activeClassName 是有效的，但是经过map循环过的navLink添加activeClassName 就无效 也没提示任何错误

  <div className="left_Menuitems">{
            this.state.menuData.map((item,key) =><div key={key}> {
              (item.name === '项目管理'||item.name === '质检'||item.name === '员工管理')
                ? <div><div className="menu_title">{item.name}</div>{
                      item.subList.map((item,key) =><div key={key} className="subMenu_title"> <NavLink key={key}  to={item.router} activeClassName="activeted">{item.name}</NavLink>
                    </div>)
                    }</div>
                : ''
            }</div>)
          }</div>

期望经过map循环过的navLink添加activeClassName 有效果

Answer 1

我感觉你这代码有地方打错了吧

        <div className="left_Menuitems">
          {this.state.menuData.map((item, key) => (
            <div key={key}>
              {item.name === "项目管理" || item.name === "质检" || item.name === "员工管理" ? (
                <div>
                  <div className="menu_title">{item.name}</div>
                  {item.subList.map((item, key) => (
                    <div key={key} className="subMenu_title">
                      <NavLink key={key} to={item.router} activeClassName="activeted">
                        {item.name}
                      </NavLink>
                    </div>
                  ))}
                </div>
              ) : (
                ""
              )}
            </div>
          ))}
        </div>