React - Use List组件中Dropdown组件的Ant设计

Question

我使用的是React的Ant设计。我在Ant Design dropdown组件中使用了Ant Design list组件。

代码运行没有问题，但我在控制台中收到两个错误！

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>
    );
  }
}

codesandbox

有人能帮帮忙吗？

Answer 1

这实际上是React发出的警告，一个未知属性被添加到DOM中。

但是，主要的问题是对overlay属性的错误使用。根据docs，您应该使用Menu作为覆盖层。antd假设您正在传递一个Menu，并尝试注入一些Menu特定的道具。你正在传递一个List，它不能理解这些注入的道具。

因此，解决方案是使用Menu而不是List。

注意:仅供参考，控制台中弹出的道具名称实际上是rc-menu的道具，antd在引擎盖下使用它。