#javascript #reactjs #next.js #styled-components
Вопрос:
Я хочу использовать эту логику для применения соответствующего класса к элементу:
<ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
Но я использую стилизованные компоненты, я не понимаю, как я могу использовать логику, чтобы полностью изменить компонент. Есть какие-нибудь идеи? Я использую Next.js
Ответ №1:
Вы можете передать функцию («интерполяции») в литерал шаблона стилизованного компонента, чтобы адаптировать его на основе его реквизитов.
Прочитайте этот раздел, Адаптация на основе реквизитов, в документации по компонентам. В вашем случае, поскольку вы не предоставили подробную информацию о коде, я могу привести вам только пример:
const DropdownMenu = styled.div`
display: ${props => props.clicked ? "none" : "block"};
`;