Проверьте наличие компонентов в стилизованных компонентах - PullRequest
Новая
       23

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

2 голосов
/ 17 июня 2019

У меня есть компонент, который принимает опору, которая запускает другой компонент.Выглядит это так: 

const IconBase = styled.div`
  // Css Styles Go Here
`;

const Icon = props => (
  <IconBase>
    <props.name />
  </IconBase>
);

Этот компонент работает следующим образом: <Icon name={Facebook} /> - что в основном эквивалентно следующему: 

<Icon><Facebook /></Icon>

Компонент <Facebook /> взят из react-icons.

Теперь все это работает так, как я хочу.Теперь я хочу выполнить проверку в Styled-Components для имени проп, а затем вывести соответствующий цвет фона.Примерно так: 

${props => props.name === "Facebook" && `background-color: #3b5998`}

Проблема в том, что я не знаю, как выполнить условную проверку в Styled-Components.Проверка на Facebook не будет работать - поскольку я не передаю String компоненту name.Что тогда мне проверять?

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Хорошо, так что я понял это. Это проверка, которая работает:

${props => props.name === Facebook ...

Вот почему это работает ...

Когда у меня есть следующий компонент: <Icon name={Facebook} />, значение пропелла {Facebook} - это функция с именем Facebook. Это то, что мне нужно проверить, функция с определенным именем функции. Итак, все, что мне нужно сделать, это оставить цитаты, и это работает.

0 голосов
/ 17 июня 2019

Как на счет этого? 

const mapBackgroundStyle = {
    'facebook': 'background-color: #3b5998'
};

const Button = styled.button`
  background: ${props => mapBackgroundStyle[props.name]};
`;

Вы также можете использовать функцию вместо отображения объекта.

...