[英]Ant Design of React - Use List component inside Dropdown component
I'm using Ant Design of React. 我正在使用React的Ant设计。 And I used Ant Design list component inside Ant Design dropdown component.
我在Ant Design下拉组件中使用了Ant Design列表组件。
The code ran without a problem, But I received two errors in the console! 代码运行没问题,但是我在控制台中收到两个错误!
class App extends Component {
state = {
notifData: [
{ title: "Ant Design Title 1" },
{ title: "Ant Design Title 2" },
{ title: "Ant Design Title 3" },
{ title: "Ant Design Title 4" }
]
};
render() {
const headerNotifDropdown = (
<List
itemLayout="horizontal"
dataSource={this.state.notifData}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar icon="user" />}
title={item.title}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
);
return (
<ul>
<li>
<Dropdown overlay={headerNotifDropdown} trigger={["click"]}>
<a href="#notif">
<Badge count={5}>
<Icon type="notification" />
</Badge>
</a>
</Dropdown>
</li>
</ul>
);
}
}
Can somebody help? 有人可以帮忙吗?
It's actually a warning by React, that an unknown property is added to the DOM. 实际上,这是React的警告,未知属性已添加到DOM。
But, the main issue is the wrong usage of the overlay
prop. 但是,主要问题是
overlay
道具的错误使用。 As per docs , you're supposed to use a Menu
as an overlay. 根据docs ,您应该使用
Menu
作为覆盖。 antd assumes that you're passing a Menu
and tries to inject some Menu
specific props. antd假设您正在传递
Menu
并尝试注入一些Menu
特定的道具。 And you're passing a List
, which doesn't understand these injected props. 而且您正在传递一个
List
,它不了解这些注入的道具。
So, the solution would be to use a Menu
and not a List
. 因此,解决方案是使用
Menu
而不是List
。
Note: FYI, the prop names that are popping up in your console are actually props of rc-menu
, which antd uses under the hood. 注意:仅供参考,控制台中弹出的道具名称实际上是
rc-menu
道具,它们是antd在幕后使用的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.