时间戳

首页 > 解决方案 > 如何在 for..of 循环（TypeScript）中动态地给 HTML 元素一个唯一的 ID？

html - 如何在 for..of 循环（TypeScript）中动态地给 HTML 元素一个唯一的 ID？

问题描述

我有一个数组，我需要将相同的 HTML 元素推入其中。我有一个for..of TypeScript 循环，它将动态地将这些元素添加到数组中。我想用唯一的 ID 区分每个元素。这可能在for..of Typescript 循环中吗？

以下是我的代码：

for (let row of this.props.users) {
    userRows.push(
            <tr>
                <td>
                    <input type="radio"
                        id="customRadio1" 
                        name="customRadio" />
                </td>
            </tr>
    );
}

现在ID是customRadio1并且将是每个元素的那个。我希望下一个 HTML 元素具有customRadio2和下一个customRadio3等等。

注意！我知道这可以通过在 for..of 循环上声明一个计数器变量并为每次运行递增该变量来实现，以便该变量可以与文本 customerRadio 一起使用，例如customerRadio + {counter}. 我想知道这是否可能只使用rowfor..of 循环中的变量以及如何？

标签： htmlreactjstypescript

解决方案

真正map的解决方案应该是这样的：

const userRows = this.props.users.map( (value, index) => (
  <tr>
    <td>
      <input type="radio" id={'customRadio' + {index}} name="customRadio" />
    </td>
  </tr>)
);

推荐阅读