有没有办法让数组保存 blazor 组件？

Question

我目前设置的剃须刀文件如下所示：

 @switch (currentStep)
        {
            case 0:
                <Component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
                break;
            case 1:
                <Component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward" />
                break;
            case 2:
                <Component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"/>
                break;
            case 3:
                <Component3/>
                break;
            default:
                <p>Some error message</p>
                break;
        }
        </div>`
    @code {
        private int currentStep = 0;
        private void MoveForward()
        {
            if (currentStep < 3) currentStep += 1;
        }
        private void MoveBackward()
        {
            if (currentStep > 0) currentStep -= 1;
        }
    }

我在每个组件内增加“currentStep”，使用 moveforward / movebackwards 作为回调来显示下一个组件。我想知道，我是否可以创建一个仅包含所有组件的数组，而不是 switch 语句，然后调用该数组？像下面这样的？

    <@steps[currentStep]>
@code{
    private __[] steps = new String[]
    {
        <component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
    }
}

如果可能的话，我只是不确定数组应该具有哪种类型，以及如何创建该类型。

任何帮助将不胜感激谢谢！

Answer 1

另一种做法是将组件标记存储在RenderFragment的数组中，与您的想法略有不同：

@steps[currentStep] 

@code{
  private RenderFragment[] steps;
  private int currentStep = 0;

  protected override void OnInitialized()
  {
    steps = new RenderFragment[4];
    steps[0] = @<component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[1] = @<component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[2] = @<component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[3] = @<component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
  }

  private void MoveForward()
  {
    if (currentStep < 3) currentStep += 1;
  }

  private void MoveBackward()
  {
    if (currentStep > 0) currentStep -= 1;
  }
}

示例：https://blazorrepl.com/repl/wvuoOtYb026k7nQj39