如何在.NET 8 Razor类库中共享带交互性的Razor组件（适配多项目）

针对你遇到的.NET 8 Blazor Web App和MAUI Blazor Hybrid共享交互式组件的问题，有几个实用的解决办法：

方法一：条件编译指令区分平台 #

利用.NET的条件编译特性，在组件中根据不同平台添加对应的渲染模式代码，MAUI Blazor不会识别@rendermode，但编译时会跳过对应代码块：

在Counter.razor顶部添加：

@* 仅在Blazor Web环境下添加交互渲染模式 *@
#if !NETMAUI
@rendermode InteractiveAuto
#endif

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

NETMAUI是MAUI项目默认的编译符号，Web项目不会包含这个符号，所以Web端会生效@rendermode，MAUI端会跳过该行，避免编译错误。

方法二：在Web端引用组件时指定渲染模式 #

不在组件内部写@rendermode，而是在Blazor Web App的路由配置或者组件引用处指定渲染模式，这样组件本身保持通用：

1. 路由配置方式：在Web App的Program.cs中注册路由时指定渲染模式：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddInteractiveAutoRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

// 针对Counter组件单独指定渲染模式
app.Map("/counter", () => 
    ComponentEndpointBuilder.Create<Counter>()
        .WithRenderMode(RenderMode.InteractiveAuto));

2. 页面引用方式：如果是在Web App的某个页面中引用Counter组件，直接在引用时指定：

<Counter @rendermode="InteractiveAuto" />

这种方式下，组件本身不需要任何平台相关代码，MAUI端直接引用即可正常运行，Web端通过外部指定渲染模式实现交互。

方法三：封装组件基类与平台适配层 #

如果需要更复杂的平台差异化处理，可以创建一个基础的Counter组件，然后分别在Web和MAUI项目中创建适配组件：

• 通用RCL中创建BaseCounter.razor，包含核心逻辑和UI，不添加渲染模式
• Blazor Web项目中创建WebCounter.razor，继承BaseCounter并添加@rendermode InteractiveAuto
• MAUI Blazor项目中直接使用BaseCounter

这个方式适合有大量平台差异化逻辑的场景，简单组件用前两种方法更高效。

内容的提问来源于stack exchange，提问作者René AD