Автор оригинала: FreeCodeCamp Community Member.
Джейк Вислер
Если вы использовали Стильные компоненты
В прошлом вы, вероятно, видели по умолчанию (в соответствии с документацией) способ объявления компонента с использованием в стиле
API:
import styled from 'styled-components'
const Button = styled.button` background: palevioletred; color: #fff;`
Ничего шокируя здесь. Документация использует этот шаблон, и если вы просматриваете любой материал на Стильные компоненты
Вы, наверное, видели то же самое.
Ну, в последние несколько недель я видел другой шаблон в нескольких библиотеках, использующих Стильные компоненты
, но я не видел много информации об этом. Вот:
const Button = styled('button')([], 'background: palevioletred', 'color: #fff')
Это интересно, и я хотел бы исследовать это.
Как это работает?
Если вы читаете Макс Stoiber’s пост Магия за стилизованными компонентами Он входит в некоторые детали о внутренней работе своей популярной библиотеки CSS. в стиле
API Стильные компоненты
Полагается на помеченные шаблонные литералы, и это, вероятно, как вы увидите, большинство людей используют его.
Но это не единственный способ объявить компоненты, используя в стиле
API. Это ключевое представление об этом посте, но сейчас может показаться неясно. Итак, чтобы ответить на вопрос, как это работает? Нам сначала нам нужно немного погрузиться в помеченные шаблонные литералы.
Меченные шаблонные литералы
Давайте сделаем важное различие в отношении шаблонных литералов против помеченных шаблонных литералов. В чем разница?
Шаблонные литералы в соответствии с Mozilla:
Эти строки могут быть многострочными:
const multiLiner = ` Look Ma, 2 lines!`
И они также могут содержать встроенные выражения, что является еще одним способом сказать, что они поддерживают Интерполяции :
const food = 'burger'
const str = 'Mmmm! That is a tasty ${food}!
$ {Это здесь}
это интерполяция. Подумайте о них как о заполнятелях для выражений JavaScript.
Тегированные шаблонные литералы С другой стороны, просто шаблонные литералы, которые используются для вызова функции вместо обычных значений, разделенных запятыми внутри скобок:
// regular function call
myFunc(1, 2, 3)
// tag function call
myFunc`1, 2, 3`
Вторая версия MyFunc
выше известно как Функция метки Отказ
То, как два сайта звонков MyFunc
Передать свои параметры – это то, что устанавливает их друг от друга. Вы уже знаете, как регулярно пропускает регулярный вызов функции, но я не ожидаю, что вы узнаете, как это функции тега.
Макс суммирует это чрезвычайно хорошо в его посте, и это Деловая вещь, которую вы должны понимать о меченных шаблонах литералов, поэтому я подведем, как это работает, используя ту же функцию, которую он создал:
const logArgs = (...args) => console.log(...args)
Функция выше использует Распространение … Отдых операторы. Аргументы функции собираются в один массив с именем args
используя ... args
синтаксис. Это называется Отдых Отказ Вы можете думать об этом как о «сборе остальных» аргументов в массив имени args
Отказ Это полезно, когда вы не знаете, сколько аргументов могут иметь функцию.
Его брат, Распространение , возникает, когда мы регистрируем аргументы в консоль, используя Console.log (... args)
Отказ Мы буквально «распространяем» содержание args
множество.
Эти два оператора помогают нам точно визуализировать то, что передается на logargs
Отказ Давайте рассмотрим результат этой функции, когда они называются двумя способами, описанными ранее:
logArgs(1, 2, 3)
// -> 1
// -> 2
// -> 3
logArgs`1, 2, 3`
// -> ["1, 2, 3"]
Призывая функцию как обычно, делает то, что мы ожидаем. Это распространяет args
Массив в отдельных значениях и входят в систему каждой в консоль.
Призыв logargs
Использование мечего шаблона литерала, с другой стороны, регистрирует массив. Это наш первый урок:
Тежные шаблонные литералы передают массив строковых значений в качестве первого аргумента к функции тега.
Вещи еще интереснее, когда мы включаем интерполяции:
const food = 'burger'
logArgs`Mmmm! That is a tasty ${food}!`
// -> ["Mmmm! That is a tasty ", "!"]
// -> "burger"
logargs
По-прежнему выводит массив строковых значений в качестве первого аргумента, но если литерал Tagged Template имеет интерполяцию, то выражение внутри интерполяции передается в виде следующего аргумента.
Что происходит, когда есть несколько интерполяций?
const food = 'burger'
const adj = 'tasty'
logArgs`Mmmm! That is a ${adj} ${food}!`
// -> ["Mmmm! That is a ", " ", "!"]
// -> "tasty"
// -> "burger"
Мы могли бы иметь столько интерполяций, сколько мы хотим, и каждый будет передан соответственно. Это второй урок:
Если интерполяции существуют внутри помеченных шаблонов литералов, их содержащие выражения передаются как дополнительные аргументы в функцию тегов.
Давайте посмотрим, как метелированные шаблонные литералы обрабатывают интерполированные функции:
logArgs`Mmmm! That is a tasty ${() => 'burger'}`
// -> ["Mmmm! That is a tasty", "!"]
// -> () => "burger"
Сама функция включена в качестве аргумента. Это сущность Стильные компоненты
Отказ Захватив такую функцию, библиотека может выполнить ее и делать то, что ему нужно сделать, в основном объединяются результирующее значение обратно в строковые значения внутри массива.
Связывая наши новые знания вместе
Теперь, когда мы знаем, как работают тегные шаблонные литералы, давайте наберем более глубокое понимание `API в стиле:
const Button = styled.button` background: ${props => props.primary ? 'red' : 'white'}; color: black;`
Стиль. Вуттон
это функция тега. Если бы мы должны были войти аргументы этой функции, мы увидели это:
logArgs` background: ${props => props.primary ? 'red' : 'white'}; color: black;`
// -> ["background: ", "; color: black;"]
// -> props => props.primary ? "red" : "white"
Вы видите власть здесь? Неудивительно, почему Стильные компоненты
Стал настолько популярен как решение CSS-IN-JS. Не только Taged Teamplate Teamplate позволяет нам писать многострочные CSS естественным образом, но позволяет библиотеке манипулировать стилями через эти интерполированные функции, предоставляя нашим компонентам динамическое ощущение.
Так как работает другой шаблон?
О да. Вот почему ты здесь, не так ли. Ранее я показал другой способ использования в стиле
API, что я видел в последнее время:
const Button = styled('button')([], 'background: palevioletred', 'color: #fff')
Сначала понимаю, что Стиль. Вуттон
и в стиле (кнопка ')
обрабатываются так же. Они взаимозаменяемы.
Во-вторых, здесь нет помеченных шаблонов буквальных действий здесь. Но, так как мы знаем, что в стиле
поддерживает их, Мы знаем, как это ожидает, что его аргументы Отказ Это основной ключ?
Помните два правила:
- Тежные шаблонные литералы передают массив строковых значений в качестве первого аргумента к функции тега.
- Если интерполяции существуют внутри помеченных шаблонов литералов, их содержащие выражения передаются как дополнительные аргументы в функцию тегов.
Таким образом, функция TAG ожидает массива строковых значений в качестве первого аргумента, и интерполированные выражения следуют костюме.
В шаблоне выше, которые я дам имя «Пустой шаблон массива» Аргументы:
// -> []
// -> 'background: palevioletred'
// -> 'color: #fff'
Первый аргумент – это массив, и удовлетворяет правилу номер один. Да, внутри массива нет строковых значений, но это совершенно нормально. Дополнительные аргументы – это строки, которые по определению являются выражениями, которые создают значение, и как таковые они удовлетворяют правилу номеру два.
Мы подражали поведение помеченных шаблонных литералов, не используя их.
Обертывание
В конце дня оба образца дают одинаковое значение. То, что я нахожу трудно обнаружить, почему вы хотели бы использовать один над другим. Я думаю, что я мог видеть ситуацию, когда, используя помеченные шаблонные литералы, у вас были несколько интерполяций, а для чтения кода вы могли бы выбрать Пустой шаблон массива вместо:
// as tagged template literal
const Button = styled.button` background: ${ props => props.background }; color: ${ props => props.color };`
// as Empty Array Pattern
const Button = styed.button([], props => ({ background: props.background, color: props.color}))
Я хотел бы услышать идеи от других, у которых есть опыт работы с этими моделями, а какие плюсы и минусы каждого!
Это был перекрестный пост от Мой собственный блог Отказ ?
Скажи привет на Twitter ?