如何在for..of循环（TypeScript）中动态地为HTML元素提供唯一的ID？

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

以下是我的代码：

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

for（让这个.props.users的行）{
userRows.push(
);
}

现在，

ID

是

customRadio1

，并且将是每个元素的ID。我希望下一个HTML元素具有

customRadio2

和下一个

customRadio3

等等

注意！我知道，通过在for..of循环中声明一个计数器变量并为每次运行递增该变量，可以实现这一点，这样该变量就可以与文本customerRadio一起使用，比如

customerRadio+{counter}

。我想知道，如果只使用for..of循环中的

行
变量，这是否可行，以及如何实现？
这是如何实现的

for (let i in this.props.users) {
    /* Since i is a string, we need to convert it to a number before calculating 
       1-based index (to start with 'customRadio1') */
    let index = Number(i) + 1; 
    userRows.push(
        <tr>
            <td>
                <input type="radio"
                    id={'customRadio' + index}
                    name="customRadio" />
            </td>
        </tr>
    );
}

for（让我输入这个.props.users）{
/*由于i是一个字符串，我们需要在计算之前将其转换为一个数字
基于1的索引（以“customRadio1”开头）*/
设指数=数（i）+1；
userRows.push(
);
}
这个怎么样

for (let i in this.props.users) {
    /* Since i is a string, we need to convert it to a number before calculating 
       1-based index (to start with 'customRadio1') */
    let index = Number(i) + 1; 
    userRows.push(
        <tr>
            <td>
                <input type="radio"
                    id={'customRadio' + index}
                    name="customRadio" />
            </td>
        </tr>
    );
}

for（让我输入这个.props.users）{
/*由于i是一个字符串，我们需要在计算之前将其转换为一个数字
基于1的索引（以“customRadio1”开头）*/
设指数=数（i）+1；
userRows.push(
);
}
在xadm关于可能改用map的评论之后，我决定将for..of循环重写为map，这似乎很方便且有效：

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

this.props.users.forEach（（值：User，索引：number）=>{
userRows.push(
);
});

如果这是可以解决的…的循环，请让我无论如何知道未来的知识
 在xadm关于可能改用map的评论之后，我决定将for..of循环重写为map，这似乎很方便且有效：

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

this.props.users.forEach（（值：User，索引：number）=>{
userRows.push(
);
});

如果这是可以解决的…的循环，请让我无论如何知道未来的知识
 True
map
解决方案应如下所示：

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

constuserrows=this.props.users.map（（值，索引）=>(
)
);
True
map
解决方案应如下所示：

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

constuserrows=this.props.users.map（（值，索引）=>(
)
);
用户结构？使用
map
？@xadm我将其重写为使用
map
，这似乎是一个很好的解决方案。如果您认为这是一个好的解决方案，请参阅我为自己的问题提供的答案？用户结构？使用
map
？@xadm我将其重写为使用
map
，这似乎是一个很好的解决方案。如果您认为这是一个好的解决方案，请参阅我为自己的问题提供的答案？如果您想通过for…loop实现这一点，请参阅我在@UdithGunaratna上面的答案，这是一个很好的选择，但这是通过for..in完成的，我一直在寻找..的方法，如果可能的话。for..in和map都可以使用，但我喜欢
map
，因为索引偏差可以在
forEach
的同一行上进行，并且不需要在新行上进行单独的索引变量偏差。我仍然对你的答案投了赞成票，因为它解决了问题：）如果你想通过for…循环来实现这一点，请看我在@UdithGunaratna上面的答案，这是一个很好的选择，但这是通过for..in完成的，我一直在寻找..的方法，如果可能的话。for..in和map都可以使用，但我喜欢
map
，因为索引偏差可以在
forEach
的同一行上进行，并且不需要在新行上进行单独的索引变量偏差。我仍然对你的答案投了赞成票，因为它解决了这个问题：）但是将值定义为type
User
可以帮助编辑器了解对象的属性，所以你可以从编辑器（比如我在使用VS2019）那里得到关于对象使用哪些属性的建议，比如：email，firstname，lastname等，这将使您避免拼写错误。我仍然同意在使用变量
userRows
时可以避免数组
push
！当然，这是为了创意，而不是理想的类型化解决方案；）为简洁起见，应该有
以避免更新错误，但将值定义为type
User
有助于编辑器了解对象的属性，因此您可以从编辑器（如我使用VS 2019）获得关于对象使用哪些属性的建议，例如：email、firstname、，lastname等，这将使您避免拼写错误。我仍然同意在使用变量
userRows
时可以避免数组
push
！当然，这是为了创意，而不是理想的类型化解决方案；）为简洁起见，应该有
，以避免更新时出现错误