问题描述
我能够基于状态更改样式化的组件样式,但是仅在页面加载时才能更改,如果在页面加载后切换状态,状态会成功更改,但样式保持不变。我要更改其样式的样式化组件是“ S.Search”,该组件位于其父项是“ Navbar”的“ Search”组件中。我正在传递“搜索”一个“ isVisible”状态作为道具,该状态由父组件“导航栏”中的onClick事件处理程序切换。
父组件:
import React,{ useContext,useState } from "react"
import Search from "../components/Search"
import * as S from "../styled/Navbar"
const Navbar = () => {
const [isVisible,setVisibility] = useState(false)
return (
<S.Navbar>
/* S.SearchButton toggles the isVisible state onclick */
<S.SearchButton onClick={() => setVisibility(!isVisible)}>
<S.SearchButtonText>Search</S.SearchButtonText>
</S.SearchButton>
/* Passing isVisible state into the Search component as props */
<Search isVisible={isVisible} setVisibility={setVisibility} />
</S.Navbar>
)
}
export default Navbar
搜索组件:
import React,{ useState } from "react"
import Icon from "../components/Icon"
import * as S from "../styled/Search"
const Search = props => {
return (
<S.Search>
<S.InputWrapper>
<S.SearchButtonIcon>
<Icon icon={"search"} />
</S.SearchButtonIcon>
<S.Input
type="text"
placeholder="Search for a character"
autocomplete="off"
/>
<S.ChampList></S.ChampList>
</S.InputWrapper>
</S.Search>
)
}
export default Search
我确定状态已正确切换,但是我不知道为什么在页面加载后切换状态时为什么样式没有更新。这是样式化的组件,可以通过传递给搜索组件的道具访问isVisible状态:
import styled from "styled-components"
export const Search = styled.div`
height: ${p => (!p.isVisible ? `0` : `2.5rem`)};
visibility: ${p => (!p.isVisible ? `hidden` : `visible`)};
opacity: ${p => (!p.isVisible ? `0` : `100`)};
display: flex;
justify-content: center;
transition: ${p => p.theme.easings.eaSEOut};
`
切换状态后,如何在页面加载后更改样式?谢谢您的时间!
解决方法
由于您没有将isVisible
属性传递给Search
样式组件,因此未应用您的样式。
您只需要在Search Component
中进行此操作:
const Search = props => {
return (
// Here´s the trick
<S.Search isVisible={props.isVisible}>
.....
.....
.....