更改样式取决于状态

Question

我试图在用户已经登录时隐藏组件

const Container = styled.div`
  display: ${(props) => props.loggedIn ? 'none' : 'block'};
`

this.state {
  loggedIn: false
}

getUrl = () => {

  //conditions to determine if user already loggedIn {
    this.setState(prevState => ({
      loggedIn: !prevState.loggedIn,
   }));

}

componentDidMount() {
  this.getUrl()
}

render() {
return (
  <SomeComponent>
   <Row>
      <Col>
        <Navbar> Navbar </Navbar>
      </Col>
      <Col>
        <Container>
          <SomeStyles>
            //somestyles
          </SomeStyles>
          <Menu>
            //MenuList
          </Menu>
        </Container>
      </Col>
    <Row>
  </SomeComponent>
);
}
}

setState 已经在工作。但问题是当我试图在样式化组件中传递它时，它只获得 "loggedIn" 状态的默认值，该值是 false。所以它总是最终得到显示的 'block' 值。

Answer 1

您需要将 loggedIn 属性传递给 Container:

// Styled Container
const Container = styled.div`
  display: ${(props) => props.loggedIn ? 'none' : 'block'};
`

// Components tree
<SomeComponent>
  <Row>
    <Col>
      <Navbar> Navbar </Navbar>
    </Col>
    <Col>
      <Container loggedIn={this.state.loggedIn}>
        <SomeStyles/>
        <Menu/>
      </Container>
    </Col>
  </Row>
</SomeComponent>

Answer 2

我认为你应该在你的风格中使用状态而不是道具，因为道具是只读的，你的改变只会影响状态

更改样式取决于状态

Changing styles depends on state

javascript

ecmascript-6

reactjs

styled-components