如何以Reactjs形式返回组件？

如何在Reactjs中创建多步骤表单提交的stepper？目前，我没有显示每个步骤的组件

现在，我可以返回组件，但它会同时返回所有组件，因为我希望返回它通过的每个步骤的中心组件

下面是步进器的代码，它可以完美地工作

import React，{useState，useffect}来自“React”；
从“道具类型”导入道具类型；
导入“/Stepper.scss”；
常量步进器=（{stepColor，steps，direction，currentStep}）=>{
const[stepState，setStepState]=useState（[]）；
useffect（（）=>{
让createSteps=steps.map（（step，idx）=>({
描述：step.label，
组件：步骤。组件，
已完成：idx

想象一下它应该是什么样子

---

您有一个步骤数组，您可以在map方法中渲染表单。这意味着正在为数组中的每个元素渲染代码。这就是为什么您收到的表单数量与步骤数组中的元素数量相同。如果要隐藏或显示它们，您应该只渲染活动（或高位）步骤的表单。 换句话说，只有当这部分代码与当前步骤有关时，才应该呈现它

<div
  className={`step-description ${
    highlighted ? "step-description-active" : ""
  }`}
>
  {description}
</div>
{idx + 1 !== stepState.length && (
  <div
    className={`divider-line divider-line-${stepState.length}`}
  />
)}
<div>{component}</div>

{说明}
{idx+1！==stepState.length&&(
)}
{component}

您可以找到一个状态（例如突出显示），描述包含活动表单数据的对象的索引，并像

{highlighted && <div>{description}</div>

{突出显示&&{description}

但老实说，我会在你的代码中做很多修改。表单本身最好是一个组件，只从状态中获取数据，而不需要在渲染部分使用任何技巧

更新： 您可以将上面提到的代码替换为：

{highlighted &&  <div
    className={`step-description ${
      highlighted ? "step-description-active" : ""
    }`}
  >
    {description}
  </div>}
  {idx + 1 !== stepState.length && (
    <div
      className={`divider-line divider-line-${stepState.length}`}
    />
  )}
{highlighted && <div>{component}</div>}

{突出显示&&
{说明}
}
{idx+1！==stepState.length&&(
)}
{突出显示&&{component}}

Hi@Tarukami我真的没有找到答案，我需要在代码中执行哪些更改？最初的问题是关于如何只显示活动步骤。我希望将我的答案标记为有用。