Использовать пользовательский компонент в атрибуте оверлея в AntD

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

Мой главный компонент:

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

Это потому, что вы добавляете в компонент Menu класс реагирования. И вы потеряете наследство компонента antd Dropdown.

Так что вам нужно передать Menu непосредственно в overlay свойство Dropdown компонента, как вы делали это с константой menu:

Именно так работает компонент.

Чтобы придерживаться пользовательского подхода к компонентам, вам необходимо включить Dropdown в MyMenu компонент, чтобы Menu передавался непосредственно 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>
    );
  }
}

Надеюсь, это поможет.

Здесь вы можете увидеть непосредственно в исходном коде, как это делается: https://github.com/ant-design/ant-design/blob/557683c7644d2aef1e2df0490815b294b063d457/components/dropdown/dropdown.tsx#L74