在Blazor组件中渲染序列

Question

我在Blazor组件中有两个RenderFragments。一个是MainContent，另一个是AuxilaryContent，即我首先放置AuxilaryContent，然后是MainContent。目前，AuxilaryContent渲染成功，然后是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
    };
}

- Kesavan Subramaniam Che

---

这很奇怪，这个逻辑在一个RenderFragment中。你能创建一个[mcve]吗？ - H H

只需将AuxilaryContent嵌入MainContent即可。 - agua from mars

你知道吗，可以使用CSS来显示每个组件在DOM上的位置，无论其实际位置在哪里。https://dev59.com/v14c5IYBdhLWcg3w7994#27374063 - dani herrera

你需要使用两个不同的组件，主要组件可以为你的场景设置一个事件。 - mRizvandi

Answer 1

假设您有两个组件，主要的和辅助的。第二个辅助组件可以根据主要组件的结果显示或不显示，这就是我理解的。

首先，Blazor是一个单页应用程序，这意味着所有内容实际上都在同一页中。假设您从页面的索引开始，它包含了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的有趣之处在于您应该将其视为具有状态模式：

您可以在此处查看什么是状态模式： 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;
}

在你的例子中，你应该做得更少或更多相同，例如，如果条件为真，则显示你的组件。因此，如果你想刷新一些带状态的组件，可以在其自己的.razor页面中完成。@ page“/”

<InputCheckbox  @bind="state" />

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

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

另一种方法是：如果您想将逻辑仅保留在一个组件上，可以使用生命周期方法： https://learn.microsoft.com/es-es/aspnet/core/blazor/components/lifecycle?view=aspnetcore-5.0

因此，如果您想首先执行一些代码，请放在onInitiallize上，然后转到下一个生命周期方法，并通过条件执行第二个块，类似于这样。

@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
    };
    }
}

希望它有所帮助。

- hesolar

Answer 2

我会考虑将这个组件重构为两个嵌套的组件：主容器控制辅助容器的条件渲染。

- Dmitry Pavlov