javascript - Ant Design 中的 Step 内嵌套下拉菜单

Question

我使用 Ant Design <Steps>我的网站上的组件。

另外，我还想要一个<Dropdown>我上次应用的组件<Step> ，像这样:

<Steps current={1}>
  <Step title="Finished" description="This is a description." />
  <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
  <Dropdown overlay={myOwnDropdownWithLinks}>
    <Step title="Waiting" description="This is another description." />
  </Dropdown>
</Steps>

我无法分配 <Dropdown> <Steps> 内的组件组件，因此我正在寻找此行为的解决方法。

如何将下拉列表分配给特定步骤？是否可以嵌套这些类型的组件？

Answer 1

引用Steps API

Prop :

• description:步骤描述，可选
• icon:步骤的图标，可选
• title:步骤标题
• subTitle:步骤的副标题

它们都具有 string|ReactNode 类型，这意味着您可以通过这些 props 直接将 JSX 组件传递给它们。

<Step title={<StepDropdown />} />

<小时/>

示例:

import { Steps, Menu, Dropdown } from "antd";
import { DownOutlined } from "@ant-design/icons";
const { Step } = Steps;

const menu = (
  <Menu>
    <Menu.Item>A</Menu.Item>
    <Menu.Item>B</Menu.Item>
    <Menu.Item>C</Menu.Item>
  </Menu>
);

const StepDropdown = () => {
  return (
    <Dropdown overlay={menu}>
      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        Hover me <DownOutlined />
      </a>
    </Dropdown>
  );
};

const App = () => {
  return (
    <Steps current={1}>
      <Step title={<StepDropdown />} description="This is a description." />
      <Step title="In Progress" description="This is a description." />
      <Step title="Waiting" description="This is a description." />
    </Steps>
  );
};