Блог

Главная - Вопросы по программированию - Как использовать функцию » как » в стилизованных компонентах?

Как использовать функцию » как » в стилизованных компонентах?

#javascript #reactjs #styled-components

Вопрос:

Я пытаюсь оформить ссылку с помощью стилизованных компонентов. В зависимости от реквизита, он покажет a <button> или a <Link> . Я видел , что могу использовать эту функцию as , но когда я это делаю, она не отображается href в сгенерированной ссылке. У кого-нибудь есть решение?

 const Button = styled.button`
    ...styles
`;


<Button href={props.url} as={props.url ? Link : "button"}>
    {props.children}
</Button>
 
 <Button>Button without url</Button>
<Button url="/">Button with url</Button>

Спасибо!

Ответ №1:

Это то, что вы можете сделать :

Если URL-адреса там нет, он останется кнопкой в качестве тега привязки

 <Button href={props.url || # } as={props.url amp;amp; "a" }>
      {props.children}
</Button>

Комментарии:

1. Да, но я хотел бы иметь маршрутизатор <Link> , а не <a> тег

2. Является ли Ссылка стилизованным компонентом или пользовательским от react-router?

3. Это основной из react-маршрутизатора

Ответ №2:

Я бы посоветовал вам использовать это для достижения того, чего вы хотите. Чем вы можете просто написать это :

  <Box as={props.url? Link : Button} to={props.url}>About</Box>

Ответ №3:

Спасибо за ваши ответы, я сделал это решение, и оно работает сейчас:

 <Container as={props.url amp;amp; Link} to={props.url} href={props.ext amp;amp; props.url}>
    {props.children}
</Container>
Метки: