Styled-components переключает классы

this.state.checkBool равно true / false

Такая структура HTML, переключайте class1 и class2

<div class='common class1'>
<div class='common class2'>

css выглядит как

common {
  display: block;
  background: grey;
}

.class1 {
  position: absolute;
  left: 1px;
  right: auto;
  top: 2px;
  background: blue;
}


.class2 {
  position: absolute;
  left: auto;
  top: 2px;
  right: 30px;
  background: yellow;
}

Стилизованный компонент

const Wrapper = styled.div`
  display: block;
  background: grey;

  // Should this part use props to check true or false?

  ${prosp => } 
`

Я застрял в том, как переключать классы

<Wrapper toggle = {this.state.checkBool ? class1 :class2 }/>

reactjs styled-components

23.02.2019 16:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

3 255

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы хотите сохранить весь CSS в styled.div и использовать реквизит toggle, чтобы решить, какой CSS вы должны использовать для компонента в зависимости от его значения.

Пример

const Wrapper = styled.div`
  display: block;
  background: grey;
  ${props => {
    if (props.toggle) {
      return `
        position: absolute;
        left: 1px;
        right: auto;
        top: 2px;
        background: blue;
      `;
    } else {
      return `
        position: absolute;
        left: auto;
        top: 2px;
        right: 30px;
        background: yellow;
      `;
    }
  }}
`;

class App extends React.Component {
  state = { checkBool: false };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ checkBool: true });
    }, 1000);
  }

  render() {
    return <Wrapper toggle = {this.state.checkBool}> Foo </Wrapper>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src = "https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id = "root"></div>

23.02.2019 16:15

Другие вопросы по теме

Почему мои GlobalStyles не работают после развертывания со стилизованными компонентами?

«Ошибка: невозможно создать стилизованный компонент для компонента: undefined», когда я использую новый ServerStyleSheet

Как разместить логотип сверху, а нижний колонтитул снизу?

Как добавить свойства к стилизованному компоненту с помощью Typescript?

Стилизация нескольких стилевых реквизитов с помощью стилевых компонентов в React Native

Есть ли способ передать реквизит при расширении стилей в стилизованных компонентах?

Как обрабатывать общие зависимости при совместном использовании компонентов между несколькими приложениями в монорепозитории

Привязка прокрутки css не работает с div в приложении React

Слой поверх полной страницы не отображается правильно

Как я могу стилизовать первую букву и применить эту анимацию линейного градиента?

Styled-components переключает классы

Ответы 1

Другие вопросы по теме

Похожие вопросы