Blazor 组件是使用 C# 和 Razor 语法编写的可重用 UI 元素。JSInterop 则是在 Blazor 中与 JavaScript 进行交互的机制。

下面是一个包含 Blazor 组件和 JSInterop 的代码示例：

1. 创建一个 Blazor 组件：

// MyComponent.razor
@inherits ComponentBase

My Component

Call JavaScript

@code {
    private async Task CallJavaScript()
    {
        await JSRuntime.InvokeVoidAsync("myJavaScriptFunction");
    }
}

2. 使用 JSInterop 调用 JavaScript 函数：

// myJavaScriptFile.js
function myJavaScriptFunction() {
    alert("Hello from JavaScript!");
}

3. 在 Blazor 程序中配置 JSInterop：

// Startup.cs
using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddBlazor();
    }

    public void Configure(IComponentsApplicationBuilder app)
    {
        app.AddComponent("app");
        app.UseBlazor();
        app.UseStaticFiles();
    }
}

请确保将 myJavaScriptFile.js 文件放置在正确的静态文件目录中，并在 index.html 中引入该文件。

以上代码示例演示了如何在 Blazor 组件中调用 JavaScript 函数。在 MyComponent.razor 中，我们使用了 JSRuntime.InvokeVoidAsync 方法来调用名为 myJavaScriptFunction 的 JavaScript 函数。然后，在 myJavaScriptFile.js 中，我们定义了该 JavaScript 函数。在 Startup.cs 中，我们配置了 JSInterop 以确保 Blazor 应用程序可以与 JavaScript 进行交互。

希望这个示例能帮助你理解 Blazor 组件和 JSInterop 的用法。