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

Question

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

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

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

Answer 1

<input>我通常有自己的自定义输入组件（等），MyDate而MySelect不是直接使用。我为此使用组件实例的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。