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

Posted 2023-03-15

【中文标题】反应：条件类名称未在 DOM 中更新

【英文标题】：React: Conditional className is not updated in DOM

【发布时间】：2020-11-16 10:48:50

【问题描述】：

当条件改变（位置）时，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 组件。

【问题讨论】：

也许使用selectedKeys from Antd Menu 和Routers useLocation 挂钩根据路由选择当前菜单项更好？

嗨@zerocewl，我也试过了，没用。有趣的是，组件重新渲染，附加了 className，selectedKeys 设置正确，组件显示新的 className 已分配给组件，但在 dom 元素中，该组件仍然具有旧的类名。我认为这可能是反应中的一个错误。我最好在代码和框中放置一个工作示例以正确呈现。

嗯，好的，selectedKeys 变体对我来说很好用。 CodeSandbox 或 Stackblitz 示例始终是展示和解决基于代码的问题的最佳选择 =)

也许这个 ant-design github 帖子/线程对你有意义github.com/ant-design/ant-design/issues/…

thx，对不起，当您在第一条评论中建议 selectedKeys 时，我不知何故理解为 openKeys，因为我也使用 openKeys。现在我使用 selectedKeys 并且一切正常。谢谢！您愿意发布答案，以便我选择吗？

【参考方案1】：

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

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

菜单可能如下所示：

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

其他示例可以在 antd 的 github 线程中找到>how to use sider with react-router links<.>