Как вложить шаблоны строк в ES6?

Question

Я получил prefer-template ошибка от эслинт. Для временного решения я изменил свой код, чтобы использовать строку шаблона внутри require функция, которая вложена в url функционировать следующим образом:

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

Однако это дало ошибку, очевидно. Вот код, который я использовал раньше, конкатенация знака плюс внутри require функция вместо строки шаблона.

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

Можно ли определить вложенные строки шаблона?

Answer 1

Да, это возможно, но вы по какой-то причине поставили )}) часть (которая закрывает require вызов, интерполированное значение и CSS url) в неправильном месте:

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

Тем не менее, это, вероятно, плохая идея, поскольку она не делает код читабельным. Лучше использовать переменную:

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