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

Question

我运行遇到了一个我以前从未遇到过的问题，老实说，这是我第一次不得不按照这些思路写一些东西，但似乎没有找到解决方案。

我正在使用 SendGrid 通过节点上的 POST 快递发送一封 HTML 电子邮件。在我需要遍历购物车中的项目以自定义 HTML 并反映每个项目之前，这工作得很好。

目前，在 HTML 中，我可以通过调用 ${req.body.data.item_name} 来打印一个变量这很好用，但在 ${req.body.data.cart} 处是他们刚购买的一系列商品。对于 UIX，我想显示所有已购买商品的列表以及价格和数量。

我尝试过的一种方法是编写辅助函数：

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>`
    })
}

然后在 HTML 文本中尝试用 ${this.iterateItems(req.body.data.cart)}

调用它

返回时未定义，老实说我有点期待。我很好奇解决这个问题并让它发挥作用的最佳方法是什么。

Answer 1

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

Answer 2

您创建的函数 returns 未定义，因为它 return 没有任何内容。你可以试试这个：

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;
}

希望这对你有用。

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

Call Method Or Iterate over Array in HTML with JSX

javascript

html-email

node.js

reactjs