不应在其组件之外设置 Blazor 组件参数

Question

我正在学习 Blazor。我没有 component-based 编程经验。

我有两个组件：一个 DateRangePicker 和一个 RadzenCheckBox。

<RadzenFieldset Text="Test Component">
    <DateRangePicker @ref="calendar" />
    <div>
        <Radzen.Blazor.RadzenCheckBox TValue="bool" Change="@((args) => txtBoxChange(args))" />
        <RadzenLabel Text="Check" />
    </div>
</RadzenFieldset>

现在，要求很简单。如果复选框被选中，则显示两个日历，如果未选中则显示一个日历。

我写了下面的代码：

@code{
    DateRangePicker calendar;

    public void txtBoxChange(bool args) 
    {
        if (args == true) //shows one calendar when checked
            calendar.ShowOnlyOneCalendar = true;
        else //shows two calendars when unchecked
            calendar.ShowOnlyOneCalendar = false;
    }
}

这很好用。

但我收到警告：

Component parameter 'ShowOnlyOneCalendar' should not be set outside of its component.

我已经阅读了一些关于此警告的博客，其中建议为组件之间的通信建立 parent 和 child 组件关系。但这些不是 parent 和 child。

我做错了什么？达到这样的要求并且没有这个警告的最好方法是什么？

Answer 1

What am I doing wrong?

不是使用命令式编程 (component.Parameter1=v1) 方式，而是应该以声明性语法传递组件参数：

<Component Parameter1="@v1"  Parameter2="@v2" />

请注意，您直接为 [Parameter] 赋值：

calendar.ShowOnlyOneCalendar = true;

这就是 Blaozr 抱怨的原因。换句话说，您需要按以下方式更改它：

<DateRangePicker ShowOnlyOneCalendar="@showOnlyOne"  />

如何修复

像其他SPA一样始终遵循这个模式：

      (render)
Data -----------> View

例如，您的代码可以改写如下：

<DateRangePicker ShowOnlyOneCalendar="@flag" />
...

@code{
    private bool flag = false;
    public void txtBoxChange(bool args)=> flag = args;
}

(这里有一个flag数据，我们要根据数据渲染视图)

或者，如果您确实想使用命令式编程方式，则需要调用方法并避免直接为 [Parameter] 属性赋值。

<DateRangePicker @ref="calendar" />
...


@code{
    DateRangePicker calendar;
    public void txtBoxChange(bool args) 
    {
         calendar.A_Wrapper_Method_That_Changes_The_Parameter(args);
         // as suggested by @Uwe Keim, 
         //    `InvokeAsync(StateHasChanged)` is better than `StateHasChanged()`
         InvokeAsync(StateHasChanged); 
    }
}

不应在其组件之外设置 Blazor 组件参数

Blazor Component parameter should not be set outside of its component

asp.net

asp.net-core

blazor

razor-components

如何修复