reactjs - 反应：条件类名称未在 DOM 中更新

问题描述

当条件发生变化（位置）时，react 不会更新 dom 中的类名，尽管它在 react 开发人员工具中看起来发生了变化。简化的代码是这样的：

      <Menu>
        {appRoutes.map(route => {
          console.log(
            pathname,
            route.path,
            pathname === route.path,
            pathname === route.path ? 'ant-menu-item-selected' : '',
          );
          return (
            <Menu.Item
              key={route.name}
              className={pathname === route.path ? 'ant-menu-item-selected' : ''}
              onClick={() => {
                setOpenKeys([getKey(route.name, index)]);
                if (app.mobile) app.toggleMobileDrawer();
              }}
            >
              <Link to={route.path}>
                <span>
                  <span className="mr-auto">{capitalize(route.name)}</span>
                </span>
              </Link>
            </Menu.Item>
          );
        })}
      </Menu>

路径名变量来自位置。我使用 react 路由器中的 useLocation 挂钩，因此当位置更改时，组件会正确重新渲染。console.log 按原样打印所有变量。此外，当我检查反应开发人员工具时，类名看起来应该是：

但是当检查开发者工具中的元素时，类不会为 dom 中的相同元素更新：

当我刷新页面（不更改位置）时，它会正确呈现，并且类名会从 dom 中删除。那么如何强制响应更新 dom 中的类名呢？

使用 react 16.13.1，antd 组件。

标签： reactjsreact-router-domantd

一种方法是使用Antd MenuselectedKeys中的属性并将其设置为您当前的路由路径值。

selectedKeys：包含当前选定菜单项的键的数组

菜单可能如下所示：

                <Menu
                    activeKey={props.currentPath}
                    mode="inline"
                    selectedKeys={props.currentPath}
                    style={{ height: "100%", borderRight: 0 }}
                >

更多示例可以在 antd 的 github 线程中找到 >如何将 sider 与 react-router 链接一起使用<。

reactjs - 反应：条件类名称未在 DOM 中更新

问题描述

解决方案

推荐阅读