Question

我试图将自定义的右键单击菜单组件添加到菜单项。我可以通过const进行操作，但是当我使用组件进行操作时，样式似乎无法正常工作。有想法吗？

工作示例：https://codesandbox.io/s/m5n31opx2j

我的自定义菜单：

我的主要组成部分：

import React from "react";
import ReactDOM from "react-dom";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import "antd/dist/antd.css";

export default class MyMenu extends React.Component {
  render() {
    return (
      <Menu>
        <Menu.Item
          onClick={e => {
            alert("clicked");
          }}
        >
          click
        </Menu.Item>
        <Menu.Item>Like it</Menu.Item>
        <Menu.Item>Bookmark</Menu.Item>
      </Menu>
    );
  }
}

Answer 1

这是因为在组件中，您将Menu与react类包装在一起。然后，您就失去了对antd Dropdown组件的继承。

因此，您需要像使用常量Menu一样将overlay直接传递到Dropdown组件的menu属性：

这就是组件的工作原理。

要保持自定义组件方法，您需要在Dropdown组件中包含MyMenu，以便将Menu直接传递给overlay属性：

import React from "react";
import ReactDOM from "react-dom";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import "antd/dist/antd.css";

const menu =
  <Menu>
    <Menu.Item
      onClick={e => {
        alert("clicked");
      }}
    >
      click
  </Menu.Item>
    <Menu.Item>Like it</Menu.Item>
    <Menu.Item>Bookmark</Menu.Item>
  </Menu>

export default class MyMenu extends React.Component {
  render() {
    return (
      <Dropdown overlay={menu} trigger={[`contextMenu`]}>
        <span style={{ userSelect: "none" }}> from const </span>
      </Dropdown>
    );
  }
}

希望这会有所帮助。

在这里您可以直接在源代码中看到如何完成此操作： https://github.com/ant-design/ant-design/blob/557683c7644d2aef1e2df0490815b294b063d457/components/dropdown/dropdown.tsx#L74

在AntD中的overlay属性中使用自定义组件

1 个答案: