如何将字符串添加到React JSX div ID？

Question

我想像这样在jsx中更改div的ID：-

{ ['A','B','C','D'].map((element, cell) => (
    <div id="alphabet_{element}">
        Some
    </div>
)) }

但是这导致

<div id="alphabet_{element}">
    Some
</div>

如何获取我的div ID中的{element}的实际值？

Answer 1

尝试一下：

{ ['A','B','C','D'].map((element, cell) => (
    <div id={`alphabet_${element}`}>
        Some
    </div>
)) }

Answer 2

使用模板文字来用字符串连接变量。

id={`alphabet_${element}`}