Ant设计4.20新的菜单项样式

Question

Ant Design在4.20.0中弃用了<Menu.Item>，因此我将其转换为新格式。

当我有以下代码时，我如何将其转换为新的格式?

<Menu>
<Menu.Item key="1" className={css.first} onClick={onFirst}>item 1</Menu.Item>
<Menu.Item key="2" className={css.second} onClick={onSecond}>item 2</Menu.Item>
</Menu>;

Answer 1

Ant Designv4.21.7你可以这样转换

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Menu } from 'antd';
const App = () => {
const [current, setCurrent] = useState();
const onFirst = (e) => {
console.log('click 1', e);
setCurrent(e.key);
};
const onSecond = (e) => {
console.log('click 2', e);
setCurrent(e.key);
};
const items = [
{
label: 'Navigation One',
children: [
{
label: 'item 1',
onClick: onFirst,
key: '1',
className: 'first',
},
{
label: 'item 2',
onClick: onSecond,
key: '2',
className: 'second',
},
],
},
];
return <Menu selectedKeys={[current]} mode="horizontal" items={items} />;
};
export default App;