[英]Nesting Dropdown inside Step in Ant Design
I use an Ant Design <Steps>
Component on my website.我在我的网站上使用了 Ant Design <Steps>
组件。
In addition, I also want to have a <Dropdown>
Component applied in my last <Step>
, something like this:此外,我还希望在我的最后一个<Step>
应用一个<Dropdown>
组件,如下所示:
<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>
I can't assign a <Dropdown>
Component inside a <Steps>
Component, so I'm looking for a workaround for this behavior.我无法在<Steps>
<Dropdown>
组件内分配<Dropdown>
组件,因此我正在寻找解决此行为的方法。
How can I assign a dropdown to a particular step?如何为特定步骤分配下拉列表? Is it possible to nest these kinds of components?是否可以嵌套这些类型的组件?
Props:道具:
They all have the type of string|ReactNode
, this means you can directly pass the JSX component to them via those props.它们都有string|ReactNode
的类型,这意味着您可以通过这些 props 直接将 JSX 组件传递给它们。
<Step title={<StepDropdown />} />
Example:例子:
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.