Use custom component in overlay attribute in AntD

Question

I am trying to add a custom right-click menu component to a menu item. I can do it via a const but when I do it with a component, styles seems to work wrong. Any idea?

Working example: https://codesandbox.io/s/m5n31opx2j

My custom menu:

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

My main component:

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";
import MyMenu from "./MyMenu";

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

class App extends React.Component {
  render() {
    return (
      <div>
        <Menu mode="horizontal">
          <Menu.Item
            key="1"
            onClick={() => {
              alert("parent clicked");
            }}
          >
            <Dropdown overlay={menu} trigger={[`contextMenu`]}>
              <span style={{ userSelect: "none" }}> from const </span>
            </Dropdown>
          </Menu.Item>

          <Menu.Item
            key="2"
            onClick={() => {
              alert("parent clicked");
            }}
          >
            <Dropdown overlay={<MyMenu />} trigger={[`contextMenu`]}>
              <span style={{ userSelect: "none" }}> from component </span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

const APP_NODE = document.getElementById(`container`);
ReactDOM.render(<App />, APP_NODE);

Answer 1

This is because in component you are wrapping Menu with react class. And you loose inheritance of antd Dropdown component.

So you need to pass Menu directly to overlay property of Dropdown component as you did it with constant menu:

That is just how component works.

To stay with custom component approach, you need to include Dropdown in MyMenu component so that Menu is passed directly to overlay prop:

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

Hope this helps.

Here you can see directly in the source code how that is done: https://github.com/ant-design/ant-design/blob/557683c7644d2aef1e2df0490815b294b063d457/components/dropdown/dropdown.tsx#L74