Блог

Главная - Вопросы по программированию - передать реквизит в селектор стилизованных компонентов

передать реквизит в селектор стилизованных компонентов

#reactjs #styled-components

#reactjs #стилизованные компоненты

Вопрос:

У меня есть стилизованный компонент, который получает некоторые дополнительные стили на основе свойства (active).

Компонент выглядит примерно так:

 import styled from 'styled-components';

const Button = styled.button`
  color: black;

  ${props => props.active ? `color: red;` : ''}
`;

В рамках компонентного теста мне нужно выбрать активную кнопку, которая (очевидно) не работает, выполняя следующее:

 document.querySelector(Button)

поскольку это нацелено на все компоненты кнопок, независимо от того, активны они или нет.

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

 document.querySelector(Button({ active: true }))

Есть ли какой-нибудь способ добиться этого или, скорее, как выбрать стилизованный компонент, который имеет определенные реквизиты?

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

1. В тесте вы пытаетесь подтвердить, что цвет был установлен на red ? Можете ли вы поделиться тестом?

2. Нет, речь идет не о красной, а о отображаемой активной кнопке. Итак, цель состоит в том, чтобы выяснить, есть ли активная кнопка (что невозможно сделать, проверив вычисленные стили этого узла, поскольку он основан на теме и может измениться, что не должно влиять на тест)

Ответ №1:

Я думаю, что нашел решение, которое, вероятно, является «правильным» способом при использовании стилизованных компонентов.

Вместо определения активного стиля с помощью реквизита в компоненте кнопки я создал еще один, который расширяет кнопку. Это, конечно, заставляет меня использовать другой компонент для активной кнопки вместо того, чтобы просто устанавливать активное свойство.

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

 const Button = styled.button`
  color: black;
`;

const ActiveButton = styled(Button)`
  color: red;
`;

document.querySelector(ActiveButton);

Ответ №2:

Правильный синтаксис таков:

 const Button = styled.button`
  color: black;
  color: ${props => props.active ? 'red' : ''};
`;
Метки: