我正在尝试在用户已经登录时隐藏组件
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。因此,它总是最终获得显示器的“阻止”值。
答案 0 :(得分:0)
您需要将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>
答案 1 :(得分:0)
我认为您应该在样式中使用状态而不是道具,因为道具是只读的,而更改只会影响状态