使用方法修改参数时Blazor组件无法渲染问题求助

问题核心原因 #

Blazor遵循单向数据流规则：组件的[Parameter]属性由其父组件“拥有”，父组件负责维护参数的源值。直接通过组件引用修改子组件的[Parameter]属性，或者在子组件内部修改这些属性，都会在父组件下一次渲染时被重置为父组件持有的原始值。你调用StateHasChanged()只是触发父组件重渲染，但父组件的isComponentShown仍为false，所以子组件的IsShown会被强制回滚，导致看不到预期的显示效果。

解决方案1：使用双向绑定（推荐） #

让子组件支持双向绑定，修改参数时同步更新父组件的状态，避免值被覆盖。

修改后的子组件代码

@if (IsShown)
{
    <h3>ExampleComponent</h3>
    
    <button @onclick="Hide">Hide</button>
}

@code {
    [Parameter] public bool IsShown { get; set; }
    // 绑定回调参数，命名必须遵循「参数名+Changed」的约定
    [Parameter] public EventCallback<bool> IsShownChanged { get; set; }

    private async Task Hide()
    {
        await IsShownChanged.InvokeAsync(false);
    }

    public async Task Show()
    {
        await IsShownChanged.InvokeAsync(true);
    }
}

修改后的父页面代码

<p><button @onclick="ShowUsingParameter">Show using parameter</button></p>
<p><button @onclick="ShowUsingProperty">Show using property</button></p>
<p><button @onclick="ShowUsingMethod">Show using method</button></p>

<!-- 使用@bind-语法启用双向绑定 -->
<ExampleComponent @bind-IsShown="isComponentShown" @ref="exampleComponent"></ExampleComponent>

@code {
    private bool isComponentShown;
    private ExampleComponent exampleComponent;

    void ShowUsingParameter()
    {
        isComponentShown = true;
    }

    async Task ShowUsingProperty()
    {
        // 通过回调同步更新父组件状态
        await exampleComponent.IsShownChanged.InvokeAsync(true);
    }

    async Task ShowUsingMethod()
    {
        await exampleComponent.Show();
    }
}

解决方案2：子组件维护内部状态 #

如果不需要父组件同步控制显示状态，可以让子组件自己维护内部的显示变量，参数仅作为初始值使用。

修改后的子组件代码

@if (_internalIsShown)
{
    <h3>ExampleComponent</h3>
    
    <button @onclick="() => _internalIsShown = false">Hide</button>
}

@code {
    private bool _internalIsShown;

    [Parameter] 
    public bool IsShown 
    { 
        get => _internalIsShown; 
        set => _internalIsShown = value; 
    }

    public void Show()
    {
        _internalIsShown = true;
        // 修改内部状态后，需要子组件自己调用StateHasChanged触发重渲染
        StateHasChanged();
    }
}

这种方式下，父组件修改isComponentShown仍能同步子组件状态，同时子组件自身或外部引用修改时，不会被父组件的重渲染覆盖。但要注意避免父组件和子组件的状态不一致问题。

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