Я пишу стилизованные компоненты чуть больше года, и все это время я не понимал, что происходит с синтаксисом тегированных шаблонных литералов. Этот синтаксис также популярен для GraphQL, если вы его используете. Думаю, многие похожи на меня в том, что они впервые столкнулись со следующим синтаксисом: «Что ж, это выглядит забавно, но если мне удастся написать SCSS вместо этого громоздкого объекта javascript css, давайте попробуем». Если бы ваш ответ был больше похож на мелодию: «Как это..

Шаблонные литералы в ES2015 имели большое значение. Наконец-то обезьяны JS получили возможность объявлять многострочную строку по нескольким строкам кода, не прибегая к беспорядочной конкатенации. А для форматирования строк приветственный синтаксис ${} упростил интерполяцию переменных. Этот: ["<span class=" + getElementClassName() + ">", " " + getElementContent(), "</span>"].join("\n") Превратился в это: `<span..

Вы когда-нибудь задумывались над тем, как волшебным образом работает синтаксический сахар, например styled ? Давайте воссоздадим эту функцию, используя помеченные строки шаблона в Javascript. Если вы использовали такие инструменты, как styled-components или graphql , вы, скорее всего, сталкивались с теговыми литералами шаблонов. Новая функция Javascript, представленная в ES6. В стилизованных компонентах шаблонные строки позволяют создавать компоненты почти волшебным образом:..