Каков вариант использования функции .attrs () Styled-Components?

Question

Я сталкивался с функцией .attrs () в стилизованных компонентах , но я не понимаю, что она делает, или что она делает иначе ? Я просто не понимаю его «вариант использования» - что вы можете с ним сделать, что вы не можете без него?

Я пытался понять пример в их документах, но, насколько мне известно, я могу сделать то же самое без функции attrs ().

Может кто-нибудь объяснить мне или привести простой пример? Был бы оценен.

Answer 1

Цель .atts в том, что ее можно передать с вашего реквизита.Таким образом, вы можете использовать реквизиты внутри вашего стиля и создавать заполнители или менять цвета в зависимости от реквизита и т. Д. *

Например:

const InputText = styled.input.attrs({
  type: 'text',
  placeholder: props => props.placeholder || 'Please fill',
})`
  padding: 6px 12px; 
`;

Answer 2

Внимание к именованию очень важно.

Стилизованные компоненты, как следует из названия, предназначены для стилизации собственных элементов DOM или пользовательских компонентов.

attrs, если для упоминания атрибутов этого самого элемента DOM в конструкторе attrs нет необходимости даже упоминать его в фактическом компоненте

Что означает строка выше

 <Input placeholder="A small text input" size="1em" 

не имеет атрибута type. Он пришел из вашей функции конструктора атрибута (статический)

Вы не могли бы сделать это иначе в ваших правилах стиля, потому что это просто строковый литерал ваших CSS свойств.

Вы можете заметить, что это спасло вас от написания type='password' при каждом использовании

<Input type='password' ... />

Теперь это конкретный компонент с типом ввода пароля. Если хотите, вы можете получить общий input, допустив, что атрибут type будет выглядеть примерно так:

const Input = styled.input.attrs(({ size, type }) => ({

  type:  type || "password",
  ...

Ваш type теперь является динамическим, то есть он будет принимать любой тип ввода, который вы указали при использовании компонента, и отображать входные данные как этот тип (текст, пароль, файл и т. Д.), Или он будет просто password печататься как дефолт. Вы можете использовать столько условной логики, сколько захотите.

Надеюсь, что ответит на ваш вопрос.

Answer 3

Цель состоит в том, чтобы добавлять новые реквизиты / модифицировать входные реквизиты (как HoC) только для определенного стилизованного компонента.

Обратите внимание:

Начиная с styled-component v4API withComponent теперь является кандидатом на устаревание.По всей вероятности, вы, вероятно, захотите использовать новую опору «как», чтобы просто переключать отображаемый элемент / компонент, поскольку API withComponent деструктивен по отношению к стилям, если компонент с наименьшей оболочкой является StyledComponent.