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

Working example:

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 ponent:

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 ponent </span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

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

I am trying to add a custom right-click menu ponent to a menu item. I can do it via a const but when I do it with a ponent, 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 ponent:

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 ponent </span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

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

• javascript
• reactjs
• antd

1 Answer 1

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

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

That is just how ponent works.

To stay with custom ponent approach, you need to include Dropdown in MyMenu ponent 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./ant-design/ant-design/blob/557683c7644d2aef1e2df0490815b294b063d457/ponents/dropdown/dropdown.tsx#L74