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

Is there a way for an array to hold blazor components?

我目前设置了一个 razor 文件,如下所示:

 @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”以显示下一个组件。我想知道,除了 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"  />
    }
}

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

如有任何帮助,我们将不胜感激!

另一种方法是将组件 markup 存储在 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