React 的 Ant 设计 - 在 Dropdown 组件中使用 List 组件答案

【问题标题】：Ant Design of React - Use List component inside Dropdown componentReact 的 Ant 设计 - 在 Dropdown 组件中使用 List 组件
【发布时间】：2019-10-06 12:09:14
【问题描述】：

我正在使用 React 的 Ant Design。我在 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

有人可以帮忙吗？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

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

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

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

注意：仅供参考，在您的控制台中弹出的道具名称实际上是 rc-menu 的道具，这是 antd 在后台使用的。

【讨论】：