react antd 下拉菜单的两种实现

方法一：Dropdown 中使用属性menu 

				   
<Dropdown className={index.menu_logo}  menu={{ items, onClick: handleMenuClick,}}>
		<a className={index.menu_logo}>
		<img className="ant-dropdown-link" onClick={e => e.preventDefault()} src={this.state.logourl} alt="头像" />
		<span  className={index.menu_loginname}>{this.state.loginname}</span>
        </a>
</Dropdown>

如何定义items:

		const items: MenuProps['items'] = [
		    {
		      label: <Space><SettingOutlined />修改密码</Space>,
		      key: '1',
		    },
		    {
		      label: <Space><PoweroffOutlined />退出登录</Space>,
		      key: '2',
		    },
		];

关联事件：

		const handleMenuClick= (e) => {
             if(e.key === '1') {
                 this.modifyPass()
             }
			 if(e.key==='2'){
				 this.loginOut()
			 }
        };

最终实现效果：

方法二：Dropdown 中使用属性overlay

<Dropdown className={index.menu_logo} overlay={menu} >
		<a className={index.menu_logo}>
		 <img className="ant-dropdown-link" onClick={e => e.preventDefault()} src={this.state.logourl} alt="头像" />
		<span  className={index.menu_loginname}>{this.state.loginname}</span>
</Dropdown>

 如何定义overlay中的menu：

		let menu = (
		  <Menu>
		        <Menu.Item key="2" onClick={()=>this.modifyPass()}>
				    <Space><SettingOutlined />修改密码</Space>
				</Menu.Item>
			    <Divider dashed={false} />
		        <Menu.Item key="3" onClick={()=>this.loginOut()}>
		    	     <Space><PoweroffOutlined />退出登录</Space>
			    </Menu.Item>
		  </Menu>
		);

实现效果：

两个方法都是实现，但是方法二实现中在edage浏览器中会这样的警告：

 

 随着antd版本的不同可能还会在变化，overlay这个属性可能在比价低的版本中可以用到，我们看antd的官网，关于Dropdown中相关的api的介绍中已经没有了overlay的相关介绍

所以建议使用方法一

希望对你有所帮助