使用Antd Menu组件的selectedKeys属性,可以在当前页面上突出显示导航菜单。首先,我们需要为每个菜单项指定一个唯一的键值,然后使用该键值设置selectedKeys属性。
代码示例:
import React from 'react';
import { Menu } from 'antd';
const { SubMenu } = Menu;
class MyMenu extends React.Component {
handleClick = e => {
console.log('click ', e);
};
render() {
return (
);
}
}
export default MyMenu;
在上面的代码中,selectedKeys属性使用了this.props.current.这个属性可以从父组件传递进来,以便知道当前页面的菜单项。
import React from 'react';
import MyMenu from './MyMenu';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 'home',
};
}
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};