在Blazor中，如何将每个组件实例中的元素ID设置为不同的值，但在组件实例中设置为相同的值

Question

在Blazor中，同一个组件通常会在一个页面上呈现两次。在这个组件中，我可能有<label for="foo">，它引用了同一组件中的<input id="foo">。

有没有一种方便的方法可以将每个组件的两个ID设置为不同的值，但在组件内设置为相同的值？如果每个组件都有一个不同的参数，我们可以使用它，但在参数值之间没有差异的情况下呢？

我想我必须声明一个私有实例值，比如private Guid ComponentInstanceId {get;} = Guid.NewGuid();，并将其与<label for="foo-@ComponentInstanceId">一起使用。。。<input id="foo-@ComponentInstanceId">，但也许还有更好的方法？

Answer 1

我通常有自己的自定义输入组件(MyDate、MySelect等(，而不是直接使用<input>。为此，我使用组件实例的GetHashCode((，下面是MySelect.razor:的部分代码

<label for="@this.GetHashCode()">@Label</label>
<select id="@this.GetHashCode()" @bind=Value>
...
</select>

然后我调用它们而不用担心id:

<MySelect Label="Source of Change" @bind-Value=ChangeOrder.SourceOfChange />

到目前为止，它似乎是可靠的，页面上的每个组件都有唯一的id，但从技术上讲，.net并不能保证在所有情况下都是唯一的。您可能需要提供自己的GetHashCode或其他函数，例如基于文档树中的位置。

或者简单地使用Guid.NewGuid((，但在标签和输入中使用相同的Guid。