Свойства as
и forwardedAs
as
Иногда, при использовании компонентов, бывает необходимо сменить тег.
Например, в случае использования компонента Button
нужно сменить ему тег button
на a
.
Для ситуаций, подобной этой, подходит свойство styled-components as
:
В иных ситуациях может понадобится передать стилизованный компонент вместо указания тега:
forwardedAs
Бывают ситуации, когда компонент многократно обернут в хок styled
.
В таких случаях использование свойства as
не даст никакого результата,
т.к тег (или стилизованный компонент) заменит собой желаемый, как в данном примере:
Для того, чтобы избежать подобных ошибок, используйте forwardedAs
вместо as
:
Пояснение к примеру: поскольку
Button
- уже является стилизованным компонентом, повторное оборачивание её в хокstyled
приводит к увеличению вложенности компонентов (не DOM-узлов!). См. официальзую документацию styled-components https://styled-components.com/docs/api#forwardedas-prop.