What is a good way to reuse blazor component multiple times?

Question

What is a good way to reuse blazor component multiple times (100+)?

Let's say I have a list of 100+ coins that I loop throw.

Home page:

@page "/Index"

// html code

@foreach(var c in coins)
{
   coin = c;
   <CascadingValue Value="@coin">
      <ProjectName.Pages.CoinComponent />
   </CascadingValue>
}

// html code

@code {

   // List of 100+ coins
   [CascadingParameter] List<Coin> coins { get; set; }

   // Coin object
   Public Coin coin { get; set; }

   // C# code
}

Coin Object:

public class Coin
   {
       public Guid Id { get; set; }

       public int Size { get; set; }

       public int Value { get; set; }

       public string Color { get; set; }

       // ect
    }

Coin page:

@page "/CoinComponent"

// html code

<div class="CoinCssClass @coin.Size @coin.Color">
   <div class="CoinCssClassValue">@coin.Value</div>
</div>

// html code

@code {
   [CascadingParameter] Coins { get; set; }

   //C# code
}

This kind of works but is there a better way of doing this?

My example works if the objects involved are small and few. Maybe I should have asked how can my example be scaled up, is there a offical recomondation for reusing components or just how to reuse blazor components. I know "better way" isn't saying much and is pretty personal. — Justin, May 13 '20 at 18:53
I think you have a typo in the `CoinComponent` part, near `CascadingParameter` (what is the type of `Coins`? And shouldn't it be simply `coin`?). — Mu-Tsun Tsai, May 14 '20 at 02:13
Yes, the typo is luckily only in this example and not in my equal code — Justin, May 14 '20 at 07:59

score 4 · Accepted Answer · answered May 14 '20 at 02:25

4

I think what you're looking for is something like the following:

Home page

@page "/Index"

@foreach(var c in coins)
{
   <ProjectName.Pages.CoinComponent coin="@c" />
}

@code {
   // I'm not sure where did these coins cascade from...
   // Did you actually cascade them from the layout or above?
   // Well, you shouldn't.
   [CascadingParameter] List<Coin> coins { get; set; }
}

CoinComponent

// You don't need @page since this is not intended to be a standalone page.

<div class="CoinCssClass @coin.Size @coin.Color">
   <div class="CoinCssClassValue">@coin.Value</div>
</div>

@code {
   // use Parameter instead of CascadingParameter
   [Parameter] Coin coin { get; set; }
}

answered May 14 '20 at 02:25

Mu-Tsun Tsai

2,348
1
12
25

Thank you for your answer! I didn't know that it was possible to pass parameters to components. I will try if your solution works – Justin May 14 '20 at 07:52
Don't forget to accept the answer if it does work :) – Mu-Tsun Tsai May 14 '20 at 09:00
Also make sure to add an `@key` directive if using a loop. – thalacker Oct 26 '21 at 22:15

score 0 · Answer 2 · answered May 30 '23 at 13:38

Answer from : https://mikaelkoskinen.net/post/render-razor-component-instance-blazor

Using the code below you render any component again without reintializing it again. But you have to keep track of the instances. Tested working in .NET 8

Welcome to your new app.
 
@RenderContent(counterInstance)
 
@functions{
    Counter counterInstance = new Counter();
 
    RenderFragment RenderContent(ComponentBase instance)
    {
        var fragmentField = GetPrivateField(instance.GetType(), "_renderFragment");
 
        var value = (RenderFragment)fragmentField.GetValue(instance);
 
        return value;
    }
 
    //https://stackoverflow.com/a/48551735/66988
    private static FieldInfo GetPrivateField(Type t, String name)
    {
        const BindingFlags bf = BindingFlags.Instance |
                                BindingFlags.NonPublic |
                                BindingFlags.DeclaredOnly;
 
        FieldInfo fi;
        while ((fi = t.GetField(name, bf)) == null && (t = t.BaseType) != null) ;
 
        return fi;
    }

What is a good way to reuse blazor component multiple times?

2 Answers2