bedingte Darstellung in styled Komponenten

Wie kann ich mit der bedingten Darstellung im Stil-Komponenten zu mein button-Klasse aktiv mit Stil-Komponenten Reagieren?

In css würde ich es tun ähnlich wie diese:

<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>

In Stil-Komponenten, wenn ich versuche, '&&' in der classname es nicht gefällt.

import React from 'react'
import styled from 'styled-components'

const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      active: false
    }  
    this.handleButton = this.handleButton.bind(this)
}

  handleButton() {
    this.setState({ active: true })
  }

  render() {
     return(
       <div>
         <Tab onClick={this.handleButton}></Tab>
       </div>
     )
  }}

InformationsquelleAutor tom harrison | 2018-01-29

  1. 44

    Können Sie einfach tun dies,

    <Tab active={this.state.active} onClick={this.handleButton}></Tab>

    Und in Ihrem Stile so etwas wie dieses:

    const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;

  ${({ active }) => active && `
    background: blue;
  `}
`;

    InformationsquelleAutor Lokuzt

  2. 0

    Wenn Ihr Zustand definiert in Ihrer Klasse Komponente wie folgt:

    class Card extends Component {
  state = {
    toggled: false
  };
  render(){
    return(
      <CardStyles toggled={this.state.toggled}>
        <small>I'm black text</small>
        <p>I will be rendered green</p>
      </CardStyles>
    )
  }
}

    Definieren Sie Ihre Stil-Komponente unter Verwendung eines ternären operator, basierend auf den Staat

    const CardStyles = styled.div`
  p {
    color: ${props => (props.toggled ? "red" : "green")};
  }
`

    sollte es Rendern nur die <p> tag hier als grün.

    Dies ist eine sehr sass-Weg von styling

    InformationsquelleAutor Vincent Tang

Schreibe einen Kommentar