在blazor中更改组件属性的正确方法 [英] Correct way to mutate a component property in blazor

问题描述

我有两个组成部分，Child.razor和Parent.razor.

I have two components, Child.razor and Parent.razor.

Child.razor HTML:

<input type="text" value="@Text" />

Child.razor C#:

[Parameter] public string Text { get; set; }

和Parent.razor HTML:

<Child @ref="child_1" />
<Child @ref="child_2" />
<Child @ref="child_3" />

Parent.razor C#:

Child child_1;
Child child_2;
Child child_3;

void SetText(Child item, string text)
{
    item.Text = text;
}

我在item.Text = text上收到警告:

警告BL0005:不应在组件的外部设置组件参数文本".

Warning BL0005: Component parameter 'Text' should not be set outside of its component.

经过一番谷歌搜索后，我发现了以下问题: BL0005-外部参数用法-为什么对此发出警告?

After some googling, I found this question: BL0005 - external parameter usage - why is a warning for that?

答案很好，但是并不能提供替代方法(github上的链接内容也不是很有帮助).

The answer is great, but it does not provide an alternative (the linked content on github is also not very helpful).

从父项中更改组件参数的正确方法是什么?

What is the correct way to mutate a component parameter from the parent?

编辑

更多说明:我知道我可以使用绑定，但是我需要能够更改SetText方法内部的值，并将要突变的Child作为参数传递.绑定的问题是变量未与组件绑定.换句话说:与孩子"的被指配者一起，我不知道我应该设置哪个绑定字符串.

To clarify a bit more: I know I could use binding, but I need to be able to change the value inside the SetText method, passing the Child I want to mutate as a parameter. The problem with binding is that the variable is not tied with the component. In other words: with the referente to the Child, I am not able to know which binding string I should set.

例如:

<Child @ref="child_1" @Text="binding_1" />
<Child @ref="child_2" @Text="binding_2"/>
<Child @ref="child_3" @Text="binding_3"/>

Parent.razor C#:

Child child_1;
Child child_2;
Child child_3;

string binding_1;
string binding_2;
string binding_3;

void SetText(Child item, string text)
{
     // which binding string should I set?
}

我可以可视化一些时髦的代码，创建一个Dictionary<Child, string>将组件与绑定字符串相关联，或者类似的东西，但是...真的吗?

I can visualize some funky code, creating a Dictionary<Child, string> to correlate the Component to the binding string, or something like that, but... really?

推荐答案

您可以在父组件中定义类型为 Child 的属性 将父组件(this)的引用传递给Parent类型的子组件属性.现在，子组件拥有对父组件的引用，并且可以将自身添加(再次使用此组件)到父组件.现在，您具有对子组件的引用，并且可以将其Text属性设置为一些有趣的东西.我希望我很清楚，如果没有的话，我会发布代码来反映这一点.以下代码有效...

You can define a property of type Child in the parent component pass a reference of the parent component (this) to the child component property of Parent type. Now the child component hold a reference to the parent component, and it can add itself (again using this) to the parent. Now you have a reference to the child component, and you can set its Text property to something interesting. I hope I'm clear, if not I'll post code to reflect this. The following code works...

<input type="text" value="@Text" />

@code
{
    [Parameter] public string Text { get; set; }
    public void SetText(string text)
    {
        Text = text;
        StateHasChanged();
    }
    [ParameterAttribute] public Parent Parent { get; set; }
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Parent.AddToParent(this);
        }
    }
}

注意，在文本框中看不到在父组件(Text="Some Text")中分配的原始组件参数Text的值 因为在父级的SetText方法调用子级的SetText方法之后，该方法立即将传递给它的值分配给Text属性，因此在文本框中看到的值是新文本"

Note that the original component parameter Text's value assigned in the parent component (Text="Some Text") is not visible in the text box because immediately after the Parent's SetText method calls the Child's SetText method, which in return assign the value passed to it to the Text property, and thus the value seen in the text box is "new text"

<Child Parent="this" Text="Some Text" />

@code{
    public void AddToParent(Child child)
    {
        string text = "new text";
        SetText(child, text);
    }

    void SetText(Child item, string text)
    {
        // which binding string should I set?
        item.SetText(text);

    }
}

用法

<Parent />

这篇关于在blazor中更改组件属性的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！