Ant Design 步进器如何添加自定义组件？

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>

都提到了in the docs, I believe what you need is the basics of React.

Answer 2

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

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

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

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

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

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

NO content Steps.Step 组件的道具。这是与接受的答案不同的另一种方式。

Ant Design 步进器如何添加自定义组件？

How to add custom components into Ant Design stepper?

reactjs

antd

stepper