如何将自定义组件添加到 Ant 设计步进器中?

Question

我是 AntD 的新手，在步进组件方面遇到了一些麻烦 - 特别是如何在每个步骤中添加自定义组件。

例如

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

为简单起见，如果我使用自动完成组件，它是否只是：

{
  title: 'First',
  content: '<Autocomplete />',
},

到目前为止没有运气。任何建议不胜感激。

Answer 1

Steps.Step 中没有content。

您可能正在尝试在 Steps 中渲染自定义组件，然后您需要提供ReactNode而不是string类型：

<Steps>
  <Steps.Step> title="Finished" description={<AutoComplete/>} />
</Steps>

文档中都提到了这些内容，我相信您需要的是 React 的基础知识。

Answer 2

也许你找到了这个官方示例 Switch Step，有一个像这样的steps变量：

const steps = [
  {
    title: 'First',
    content: 'First-content',
  },
  {
    title: 'Second',
    content: 'Second-content',
  },
  {
    title: 'Last',
    content: 'Last-content',
  },
];

这是一个用户定义的变量，不是由antd预定义的，你可以使用任何属性，甚至是你想要的数据结构。您可以将ReactNode分配给content属性，例如：

const steps = [
  {
    title: 'First',
    content: <Autocomplete />,
  },
  // ...
]

并根据当前步骤状态渲染content：

<div className="steps-content">{steps[current].content}</div>

Steps.Step组件没有content道具。这是与公认的答案不同的另一种方式。