Javascript 使用JSX在HTML中调用方法或迭代数组

我遇到了一个我以前从未遇到过的问题，老实说，这是我第一次不得不按照这些思路写一些东西，我似乎想不出一个解决办法

我正在使用SendGrid通过节点上的express中的帖子发送HTML电子邮件。在我需要迭代购物车中的项目以自定义HTML并反映每个项目之前，这一切都非常好

目前，在HTML中，我可以通过调用

${req.body.data.item_name}

这非常有效，但是在

${req.body.data.cart}

中，他们刚刚购买了一系列商品。 对于UIX，我想显示所有购买物品的清单，包括价格和数量

我尝试过的一种方法是编写一个helper函数：

function iterateItems(cart){
let body = ""

cart.forEach(function(item) {
      body = body + `<p style="Margin-top: 20px;Margin-bottom: 0;">${item.name}: $${item.price} QTY: ${item.qty}</p>`
    })
}

函数迭代项（购物车）{
让body=“”
cart.forEach（功能（项目）{
body=body+`
${item.name}:$$${item.price}数量：${item.QTY}
`
})
}

然后在HTML文本中，尝试使用

${this.iterateItems（req.body.data.cart）}

---

它还没有定义，我真的有点期待。我很好奇什么是实现这一点并使其工作的最佳方法。

尝试使用map而不是foreach，应该可以解决这个问题

您创建的函数返回未定义的值，因为它不返回任何内容。您可以尝试以下方法：

function iterateItems(cart){
   let body = ""

   cart.forEach(function(item) {
      body = body + `<p style="Margin-top: 20px;Margin-bottom: 0;">${item.name}: $${item.price} QTY: ${item.qty}</p>`
   })
   return body;
}

函数迭代项（购物车）{
让body=“”
cart.forEach（功能（项目）{
body=body+`
${item.name}:$$${item.price}数量：${item.QTY}
`
})
返回体；
}

---

希望这对您有用。

谢谢！哈哈，有时候事情很简单，我发誓这只是因为我连续工作了12个多小时哈哈