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

Question

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

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方法返回一个数组，当您将其结果嵌入模板字符串时，该数组会隐式转换为字符串，默认情况下会在数组元素之间添加逗号。

解决方案：链 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('');
}