Blazorise实现点击切换图标按钮的问题咨询

错误原因分析 #

• 第一种方案错误点：Blazorise 组件的所有渲染参数（如Name）遵循Blazor单向数据流规则，仅支持通过组件属性绑定赋值，禁止外部直接修改组件实例的属性，因此你通过@ref修改Name的写法会直接触发报错。
• 第二种方案错误点：双图标切换Visibility的写法本身逻辑成立，但0.9.4.7版本Blazorise的Visibility属性在Icon组件上存在适配问题，且如果你的Process是普通POCO类没有实现INotifyPropertyChanged接口，属性变更后组件不会自动触发重渲染，导致看不到切换效果。

正确实现方案 #

不需要用@ref也不需要写两个图标，直接用数据绑定动态赋值Icon的Name属性即可，代码如下：

Razor 代码 #

<!-- 带按钮包裹的写法 -->
<Button Clicked="() => Show(process)">
    <Icon Name="@(process.Show ? IconName.EyeSlash : IconName.Eye)" />
</Button>

<!-- 不需要按钮，直接点击图标切换的写法 -->
<!-- <Icon Clicked="() => Show(process)" 
      Name="@(process.Show ? IconName.EyeSlash : IconName.Eye)" 
      Style="cursor: pointer;" /> -->

对应C#代码 #

public void Show(Process project)
{
    project.ToggleShow();
    // 若Process类未实现INotifyPropertyChanged，手动触发组件重渲染
    StateHasChanged();
}

实现说明 #

该写法通过Blazor原生的单向数据绑定机制，当process.Show属性变更后，组件会自动重新计算Name属性值并渲染对应的图标，符合Blazor和Blazorise的设计规范，兼容性最好。

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