如何在同一模块中实现模板文字块？

Question

考虑一个包含 HTML 代码的 module.exports 模板。该模块采用两个数据参数。这是代码示例：

module.exports = (data, d) => {
  return `
    <div class='modal-dialog modal-md' role='document'>
      <div class='modal-content'>
        <h3 class='text-center'>${d.nombre}</h3>
      </div>
      <div class='row'>
        ${data.map((t) => {
          return `
            <div class='thumbnail'>
            </div>
          `;
        })}
      </div>
    </div>
  `
}

我正在使用两个不同的模板文字块，一个用于 d 数据集，另一个用于 data 参数，需要 map 方法才能获取数据。

然而，当数据在 array 中有两个或多个项目时，我在每个 div 之间得到了一种 ,。

我得到了这个输出：

我尝试使用 yo-yo 模块并在不同的文件中写入 map 方法，但我没有得到不同的结果。

使用两个模板文本块是一个好习惯，还是我遗漏了一些可以避免此输出的内容？

Answer 1

map 方法 returns 一个数组，当您将其结果嵌入模板字符串时，该数组会隐式转换为字符串，默认情况下会在数组元素之间添加逗号。

解决方案：链 a .join(''):

    ${data.map((t) => {
      return `
        <div class='thumbnail'>
        </div>
      `;
    }).join('')}

Answer 2

因为您使用的是模板文字，所以您的数组在您的地图之后被强制转换为一个字符串（您没有使用 jsx）。看看在数组上调用 toString 时会发生什么（它用逗号连接）：

console.log( [1,2].toString() );

要在您的特定情况下停止此行为，请在地图后的数组上调用 .join()：

${
    data.map((t) => `<div class='thumbnail'></div>`)
    .join('');
}

如何在同一模块中实现模板文字块？

How to implement blocks of template literals in the same module?

javascript

template-literals