更改 Razor @ref 组件中的属性不会更新其在 HTML 元素中的用法

Question

这里是 Blazor 的初学者。

我有一个非常简单的 Razor 组件，它有一个名为

Paragraph

的属性，该属性由 HTML

<p>

元素使用：

<p>@Paragraph</p>
@code {
    public string Paragraph { get; set; } = "initial value";
}

在父组件中，我使用该组件（名为 Foo）并更改 OnAfterRender 中的 Paragraph 属性：

<Foo @ref="_foo" />

@code {
    private Foo? _foo;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            if (_foo is not null)
            {
                _foo.Paragraph = "Changed";
            }
        }
    }
}

然而，这并没有真正起到任何作用；我仍然看到“初始值”段落，而不是“更改”段落。事实上，代码行

_foo.Paragraph = "Changed";

确实执行了，但我并没有真正看到任何变化。

我也尝试调用

StateHasChanged()

方法，但它并没有真正改变任何东西。

该段落没有更改为

Changed

是否存在技术原因？我见过很多类似的问题，但还没有找到解决我的问题的解决方案。

Answer 1

父级只有

<Foo @ref="_foo" />

，注意没有参数。

我还尝试调用接近的

StateHasChanged()

，但这将重新渲染父组件，而不是 Foo 组件。

由于 StatHasChanged() 受到保护，您无法直接调用它，但您必须向 Foo 添加一个方法并使用它，如下所示：

   if (firstRender)
    {
        if (_foo is not null)
        {
            _foo.Paragraph = "Changed";
            _foo.DoStateHasChanged();
        }
    }

或者向 Foo 添加一个复杂（类）类型的参数。