c# - blazor 组件中的渲染顺序

Question

我在 blazor 组件中有两个 RenderFragment。一个是 MainContent 另一个是 AuxilaryContent，即我首先放置 AuxilaryContent，然后是 MainContent。到目前为止， MainContent 渲染的辅助内容成功了，因为我首先放置了 AuxilaryContent。
但我的要求是我需要先渲染 MainContent，基于 MainContent 的渲染，我可能会渲染 AuxilaryContent。但是在 DOM 中，AuxilaryContent 总是位于 MainContent 之前。
这可能吗？
如果我在 MainContent 中使用 bool，那么通过使用 bool 来触发 SecondaryContent 意味着，它需要另一个 StateHasChanged()。它涉及不必要的组件重新渲染。

@page "/check"

@AuxilaryContent
@MainContent

@code {
    RenderFragment MainContent => (builder) =>
    {
        //It must be rendered first
    };
    RenderFragment AuxilaryContent => (builder) =>
    {
        //It should rendered after MainContent rendering. But in DOM, it always lies before MainContent
    };
}

Answer 1

假设您有 2 个组件，main 和 aux。
第二个辅助可以通过主要的结果显示或不显示，这就是我的理解。
首先，Blazor 是一个 spa(单页应用程序)，这意味着实际上所有内容都在同一页面中，我的意思是，假设您从页面的索引开始，它包含 blazor 项目的所有组件。
内部的组件可以包含或不包含其他组件。
例如，假设有一组书籍:
索引页面会更像这样:

@page "/"
<book1_component></book1_component>
<book2_component></book2_component>
<book3_component></book3_component>

如果您愿意，您可以在每个组件内部放置另一个组件。

<h1>book1</h1>

<label>title</label> <input type="text" />
<label>author</label> <input type="text" />
<other_component> </other_component>

@code{ 
    //methods
}

关于 blazor 的有趣之处在于，您应该像拥有​​ State-Patron 一样使用它:
你可以在这里查看它是什么国家赞助人:
https://refactoring.guru/es/design-patterns/state
我的意思是，如果状态发生变化，那么 blazor 的行为也会发生变化。
示例:这里可以看到，如果索引组件的状态发生变化，就会有一个或其他组件，甚至没有。

@page "/"

<input type="int" max="4" min="1" @bind="state" />

@if( state == 1 )<book1_component></book1_component>
@if( state == 2 )<book2_component></book2_component>
@if( state == 3 )<book3_component></book3_component>

@if(i>4) <label> no books!</label>

@code{
    int state;
}

因此，在您的示例中，您应该做更多更少的事情，例如，如果条件为真，则显示您的组件。
所以如果你想用 statehaschange 刷新一些组件，你可以在它自己的 .razor 页面中完成。
@页 ”/”

<InputCheckbox  @bind="state" />

@if( state) <aux_component></aux_component>
else Not loading component.

@code{
    bool state;
    //operations to change the state
}

另一种方式，可以是:如果您只想将逻辑保留在一个组件上，则可以使用生命周期方法:
https://docs.microsoft.com/es-es/aspnet/core/blazor/components/lifecycle?view=aspnetcore-5.0
因此，如果您想先执行一些代码，然后将其放在Initialize 上，然后转到下一个生命周期方法并按条件执行第二个块，类似这样的事情。

@page "/check"

@AuxilaryContent
@MainContent

@code {

    protected override void OnInitiallize(){
        //executing the first
        RenderFragment MainContent => (builder) =>
        {
            //It must be rendered first
        };
    }
    protected override void OnParametersSet(){
   //main component rendered
   RenderFragment AuxilaryContent => (builder) =>
    {
        //It should rendered after MainContent rendering. But in DOM, it always lies before MainContent
    };
    }
}

希望能帮助到你。