ES6でテンプレート文字列をネストする方法は？

Question

eslintからprefer-templateエラーが発生しました。しかし

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

、明らかに、エラーが発生しました：この問題を回避するために、私は次のようurl関数の内部にネストされrequire関数内でテンプレート文字列を使用するように私のコードを変更しました。前に使用していたコードは、テンプレート文字列の代わりに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` 
}