Blazor中子组件无法识别父组件定义的User类型，该如何解决？

我需要实现向组件传递一个类型列表并展示，代码示例如下：

顶级页面代码 #

<Test Items="users" />

@code {
    public class User
    {
        public int Id { get; set; }
        public string Username { get; set; }
    }

    public List<User> users { get; set; } = new (){
        new User{
            Id = 1,
            Username = "Me",
        },
        new User{
            Id = 2,
            Username = "You",
        }
    }; 
}

Test.razor组件代码 #

<h3>Test</h3>

@{
    if (Users != null)
    {
        @foreach (var user in Users)
        {
            <div>
                @user.Username
            </div>
        }
    }
}

@code {
    [Parameter]
    public List<User> Users { get; set; }
}

编译器返回错误：

The type or namespace name 'User' could not be found (are you missing a using directive or an assembly reference?)

请问需要对上述代码做哪些修改，才能让子组件正确识别父组件中定义的User类型？

问题核心是：父组件内定义的User类作用域仅限当前页面，子组件无法访问该类型。以下是三种可行的修改方案：

方案1：将User类移至共享可访问位置 #

把User类从父组件的@code块中移出，单独创建一个类文件（比如Models/User.cs），确保其命名空间能被子组件引用：

// Models/User.cs
namespace YourProjectName.Models; // 替换为你的项目实际命名空间
public class User
{
    public int Id { get; set; }
    public string Username { get; set; }
}

随后在父组件和子组件的顶部添加using指令：

@using YourProjectName.Models

同时修正父组件的参数传递名，把<Test Items="users" />改成<Test Users="users" />，保证和子组件的参数名一致。

方案2：让User类处于子组件可访问的命名空间 #

如果不想单独创建类文件，可以把User类定义在父组件的命名空间下（不要放在@code的局部作用域内）：
修改父组件：

@namespace YourProjectName.Pages

<Test Users="users" />

@code {
    public List<User> users { get; set; } = new (){
        new User{ Id = 1, Username = "Me" },
        new User{ Id = 2, Username = "You" }
    }; 
}

// 将User类放在@code外，属于当前命名空间
public class User
{
    public int Id { get; set; }
    public string Username { get; set; }
}

然后在子组件Test.razor顶部添加using指令：

@using YourProjectName.Pages

方案3：使用泛型组件（通用型方案） #

如果希望子组件支持多种类型的列表，可以改成泛型组件，无需提前定义具体类型：
修改Test.razor：

@typeparam TItem

<h3>Test</h3>

@if (Items != null)
{
    @foreach (var item in Items)
    {
        @ItemTemplate(item)
    }
}

@code {
    [Parameter]
    public List<TItem> Items { get; set; }

    // 由父组件传入每个项的渲染逻辑
    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }
}

父组件调用时：

<Test Items="users">
    <ItemTemplate>
        <div>@context.Username</div>
    </ItemTemplate>
</Test>

@code {
    public class User
    {
        public int Id { get; set; }
        public string Username { get; set; }
    }

    public List<User> users { get; set; } = new (){
        new User{ Id = 1, Username = "Me" },
        new User{ Id = 2, Username = "You" }
    }; 
}

这种方式无需子组件识别父组件的自定义类型，通用性更强。

内容的提问来源于stack exchange，提问作者Musaffar Patel