Antd 将 Tooltip 应用于非折叠 Sider 上的 Menu.Item

Question

我正在尝试复制折叠的 Sider 而没有声明 collapsed={true} 纯粹是为了获得工具提示效果。

问题是当我将Menu.Item 包装在Tooltip 中时，它似乎不再被定义并且特殊触发器也没有出现

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Layout, Menu, Icon, Tooltip } from "antd";
import { sidebar } from "./nav";

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsedWidth="0" breakpoint="sm">
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
            {sidebar.map(menu => (
              <Tooltip placement="right" title={menu.name}>
                <Menu.Item
                  style={{ borderRadius: 2, width: "72px" }}
                  item={menu.name}
                  key={menu.key}
                >
                  <Icon type={menu.icon} />
                </Menu.Item>
              </Tooltip>
            ))}
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: "#fff", padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
              onClick={this.toggle}
            />
          </Header>
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              background: "#fff",
              minHeight: 280
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, document.getElementById("container"));

Answer 1

将您的tooltip 移动到内部并包裹Menu.Item 的Icon。我发现这是最快的方法。

   {sidebar.map(menu => (
              <Menu.Item
                style={{ borderRadius: 2, width: "72px" }}
                item={menu.name}
                key={menu.key}
              >
                <Tooltip
                  placement="right"
                  title={menu.name}
                  className="tooltip"
                >
                  <div className="my-icon-wrapper test">
                    <Icon type={menu.icon} />
                  </div>
                </Tooltip>
              </Menu.Item>
            ))}

css

.my-icon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.test {
  border: 1px solid red;
}

Answer 2

目前，您的代码无法正常工作，因为Menu 要求其子级只能为Menu.Item 类型。

因此，您需要添加与 width 相同的包装器 Menu.Item。

//    v remove the trigger={null} for trigger to appear
<Sider collapsible collapsedWidth="0" breakpoint="sm">


<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  {sidebar.map(menu => (
    <Menu.Item item={menu.name} key={menu.key}>
      <Tooltip placement="right" title={menu.name}>
//                       v Wrapper
        <div style={{ width: '100%' }}>
          <Icon type={menu.icon} />
        </div>
      </Tooltip>
    </Menu.Item>
  ))}
</Menu>