Comment imbriquer des chaînes de modèle dans ES6?

Question

J'ai un prefer-template erreur d'eslint. Pour la solution de contournement, j'ai changé mon code pour utiliser une chaîne de modèle à l'intérieur de la fonction require qui est imbriquée à l'intérieur de la fonction url comme suit:

{
  background: `url(${require(`../../assets/${Edge.node.name.toLowerCase()}.png` center no-repeat`)})
}

Cependant, cela a donné une erreur, évidemment. Voici le code que j'utilisais auparavant, un signe plus concaténant à l'intérieur de la fonction require au lieu de la chaîne de modèle.

{
  background: `url(${require('../../assets/' + Edge.node.name.toLowerCase() + '.png')}) center no-repeat`
}

Serait-il possible de définir des chaînes de modèle imbriquées?

Answer 1

Oui, c'est possible, mais vous aviez pour une raison quelconque mis le )}) part (qui ferme l'appel require, la valeur interpolée et le CSS url) au mauvais endroit:

{
  background: `url(${require(`../../assets/${Edge.node.name.toLowerCase()}.png`)}) center no-repeat`
//                                                                             ^^^
}

Cela dit, c'est probablement une mauvaise idée car cela ne rend pas exactement le code lisible. Mieux vaut utiliser une variable:

const bgurl = require(`../../assets/${Edge.node.name.toLowerCase()}.png`);
… {
  background: `url(${bgurl}) center no-repeat`
}