Ant Design of React - использование компонента List внутри выпадающего компонента

Question

Я использую Ant Design of React.И я использовал компонент списка Ant Design внутри выпадающего компонента Ant Design.

Код запустился без проблем, но я получил две ошибки в консоли!

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 проп. Согласно документам , вы должны использовать Menu в качестве наложения. antd предполагает, что вы передаете Menu и пытается внедрить некоторые Menu специальные реквизиты. И вы передаете List, который не понимает эти впрыскиваемые реквизиты.

Таким образом, решение будет использовать Menu, а не List.

Примечание: к вашему сведению, названия реквизитов, которые появляются в вашей консоли, на самом деле являются реквизитами rc-menu, которые использует antd под капотом.