更改样式取决于状态答案

【问题标题】：Changing styles depends on state更改样式取决于状态
【发布时间】：2020-03-03 16:41:12
【问题描述】：

当用户已经登录时，我试图隐藏一个组件

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”状态的默认值，它是假的。所以它总是最终得到显示的“块”值。

【问题讨论】：

你能用你的渲染逻辑编辑问题吗？
getUrl = () => { //conditions to determine if user already loggedIn { this.setState({ loggedIn: !this.state.loggedIn }) }
@MSoheb 我没有问题，因为它已经在工作了。唯一的问题是将 props 传递给样式化组件，因为它只获取默认值
在这种情况下，你必须展示你是如何尝试渲染组件的
请做一个可生产的例子，你在哪里使用容器？

标签： javascript reactjs ecmascript-6 styled-components

【解决方案1】：

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

【讨论】：

【解决方案2】：

您需要将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>

【讨论】：

成功了！我忘了传递loggedIn 属性。谢谢楼主！
您还有一个选项可以在没有样式组件的情况下实现结果。您可以使用条件渲染而不是使用 css 显示属性。 ```` {props.loggedIn && } ````
请注意，您会因为卸载它而丢失组件的状态，这取决于用例。