Blazor参数传递异常：字符串参数返回变量名而非实际值

你的问题出在父组件传递字符串参数的语法上——你用双引号把变量名包起来了，这会让Blazor把它当成普通字符串字面量传递，而不是引用你定义的C#变量值。布尔参数之所以正常，是因为Blazor对布尔类型参数有语法糖支持，但字符串参数必须用@来绑定变量。

1. 修正父组件传参语法 #

把父组件中带引号的字符串参数改成@变量名的形式，这样才能传递变量的实际值：

<section class="p-4">
    @if (showImagePreviewContainer)
    {
        <!-- 用@绑定currentImageUrl变量 -->
        <ImagePreviewContainer ClosePreviewContainer="ClosePreviewContainer"
                               currentImageUrl="@currentImageUrl" />
    }

    <div class="text-center">
        <h3 class="text-3xl font-bold mb-2">Library</h3>
        <h4 class="text-xl">Access your saved and purchased designs</h4>
    </div>

    <section class="my-2 mx-auto">
        <!-- buttonText和currentImageUrl都用@绑定 -->
        <LibraryItemsContainer freeImagesOpen="@freeImagesOpen"
                               buttonText="@buttonText"
                               ToggleFreeImagesContainer="ToggleFreeImagesContainer"
                               OpenPreviewContainer="OpenPreviewContainer"
                               currentImageUrl="@currentImageUrl"
                               OnCurrentImageUrlChanged="@(url => currentImageUrl = url)" />
    </section>
</section>

@code {
    // 补充Main组件中缺失的buttonText和freeImagesOpen定义（示例）
    public string buttonText { get; set; } = "Show Free Images";
    public bool freeImagesOpen { get; set; } = false;

    // 你原有的代码
    public bool showImagePreviewContainer { get; set; } = false;
    public string currentImageUrl { get; set; } = "";

    public void OpenPreviewContainer()
    {
        showImagePreviewContainer = true;
    }    

    public void ClosePreviewContainer()
    {
        showImagePreviewContainer = false;
    }

    public void ToggleFreeImagesContainer()
    {
        freeImagesOpen = !freeImagesOpen;
        // 根据状态切换按钮文本
        buttonText = freeImagesOpen ? "Hide Free Images" : "Show Free Images";
    }
}

2. 修正子组件的参数修改逻辑 #

你在LibraryItemsContainer的PreviewImage方法里直接修改了currentImageUrl参数，这不符合Blazor的单向数据流原则（参数应该由父组件维护）。需要新增一个EventCallback通知父组件更新值：

<section>
    <div>
        <div class="grid justify-center my-4">
            <button class="outline outline-1 outline-black rounded hover:bg-main-colour cursor-pointer py-2 px-4 mt-4" @onclick="toggleFreeImages">@buttonText</button>
        </div>
        <div class="@(freeImagesOpen ? "grid" : "hidden")">
            <div class="grid grid-cols-6 gap-4 mx-auto mt-4">
                @foreach (var image in ImagesContainer.ImageList)
                {
                    <div class="p-2 outline outline-1 outline-gray-300 rounded-lg cursor-pointer grid items-center justify-center w-[75px] h-[75px]" title="@image.Name">
                        <img src="@image.FilePath" alt="@image.Name" @onclick="() => PreviewImage(image.FilePath)"/>
                    </div>
                }
            </div>
        </div>
    </div>
</section>

@code {
    public FreeImages ImagesContainer = new FreeImages();

    [Parameter]
    public bool freeImagesOpen { get; set; }    

    [Parameter]
    public string? currentImageUrl { get; set; }

    [Parameter]
    public string? buttonText { get; set; }

    [Parameter]
    public EventCallback ToggleFreeImagesContainer { get; set; }

    // 新增回调，用于通知父组件更新图片URL
    [Parameter]
    public EventCallback<string> OnCurrentImageUrlChanged { get; set; }

    [Parameter]
    public EventCallback OpenPreviewContainer { get; set; }

    public async Task toggleFreeImages()
    {
        Console.WriteLine($"buttons {buttonText}");
        await ToggleFreeImagesContainer.InvokeAsync();
    }    

    public async Task PreviewImage(string filePath)
    {
        Console.WriteLine($"IMAGE SSSS");
        // 通知父组件更新URL，而非直接修改参数
        await OnCurrentImageUrlChanged.InvokeAsync(filePath);
        await OpenPreviewContainer.InvokeAsync();
    }
}

核心说明 #

• Blazor中，"变量名"传递的是字符串字面量，@变量名才是绑定组件的C#变量值；
• 布尔参数可以省略@是语法糖，但字符串/复杂类型参数必须显式用@；
• 严格遵循单向数据流：子组件不要直接修改[Parameter]属性，通过EventCallback通知父组件更新，避免状态不一致。

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