Considere una plantilla module.exports que contiene un código HTML. Este módulo toma dos parámetros de datos. Este es un ejemplo del código:

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

Estoy usando dos bloques diferentes de literales de plantilla, uno para el conjunto de datos d y otro para el parámetro data que necesita un método map para obtener datos.

Sin embargo, cuando los datos tienen dos o más elementos en array, obtengo una especie de , entre cada div.

Tengo esta salida:

enter image description here

Intenté usar el módulo yo-yo y escribir en un archivo diferente el método map, pero no obtuve un resultado diferente.

Usar dos bloques de literales de plantilla es una buena práctica o me falta algo que podría evitar este resultado.

1
Ramiro Tormenta 12 nov. 2017 a las 00:44

2 respuestas

La mejor respuesta

El método map devuelve una matriz y, a medida que incrusta su resultado en una cadena de plantilla, esa matriz se convierte implícitamente en una cadena, que de forma predeterminada agrega comas entre los elementos de la matriz.

Solución: encadena un .join(''):

    ${data.map((t) => {
      return `
        <div class='thumbnail'>
        </div>
      `;
    }).join('')}
1
trincot 11 nov. 2017 a las 21:59

Debido a que está utilizando literales de plantilla, su matriz se convierte en una cadena después de su mapa (no está utilizando jsx). Vea lo que sucede cuando se llama a toString en una matriz (se une con una coma):

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

Para detener este comportamiento en su caso particular, llame a .join() en la matriz después del mapa:

${
    data.map((t) => `<div class='thumbnail'></div>`)
    .join('');
}
1
KevBot 11 nov. 2017 a las 21:59