2

我是 AntD 的新手，在使用 stepper 组件时遇到了一些麻烦——特别是如何在每个步骤中添加自定义组件。

例如，

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

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

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

到目前为止没有运气。任何建议表示赞赏。

4

2 回答 2

4

content中没有Steps.Step。

您可能正在尝试在 中呈现自定义组件Steps，那么您需要提供ReactNode而不是string类型：

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

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

于 2019-11-22T19:23:33.540 回答
1

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

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

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

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

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

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

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

于 2021-11-18T03:41:24.280 回答