Come nidificare stringhe di modelli in ES6?

Question

Ho ricevuto un errore prefer-template da eslint. Per la soluzione, ho cambiato il mio codice per utilizzare una stringa di modello all'interno della funzione require che è nidificato all'interno della funzione url come segue:

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

Tuttavia, che ha dato un errore, ovviamente. Ecco il codice che stavo usando in precedenza, un segno più che concatena all'interno della funzione require invece della stringa del modello.

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

Sarebbe possibile definire stringhe di template annidate?

Answer 1

Sì, è possibile, ma si doveva per qualche motivo mettere la parte )}) (che chiude la require chiamata, il valore interpolato, e il CSS url) nel posto sbagliato:

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

Detto questo, è probabilmente una cattiva idea in quanto non rende esattamente il codice leggibile. Meglio usare una variabile:

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