Question

我正在使用React的Ant设计。我在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道具的错误用法。根据{{3}}，您应该使用Menu作为覆盖。 antd假设您正在传递Menu，并尝试注入一些Menu特定道具。而且您正在传递List，它不理解这些注入的道具。

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

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

React的Ant设计-Dropdown组件内部的Use List组件

1 个答案: