reactjs - Styled-Components 中的 If/Else 语句不注入 css 代码
问题描述
我正在使用 React.js 和 Styled-Components 设计一个滑出式菜单抽屉。我希望抽屉在按钮被切换时滑出,而在未切换时滑回。
在将道具传递给我的样式组件时,我能够通过使用简单的三元运算符来使其工作(见下文)。但是每当我的反应组件渲染并初始化它的状态时,它就会滑出。
为了解决这个问题,我尝试添加一个 if/else 语句,以确保它只会在 true/false 上滑出,而不是在 null/undefined 上滑出。问题是现在它没有正确注入 CSS。
此代码有效,但在渲染反应组件时会滑出。(由于某种原因,反引号也没有显示在stackoverflow中,但它们就在那里。)
${props => props.isToggled ? css`
animation-name: ${slideRight};
animation-duration: .4s;
animation-fill-mode: forwards;
` : css`
animation-name: ${slideLeft};
animation-duration: .4s;
animation-fill-mode: forwards;
`}
这是我的样式化组件代码:
const MenuDrawer = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100vh;
background-color: #1c1c1c;
${props => {
if (props.isToggled === true) {
css`
animation-name: ${slideRight};
animation-duration: .4s;
animation-fill-mode: forwards;
`
console.log("props is equal to true and" + props.isToggled);
} else if (props.isToggled === false) {
css`
animation-name: ${slideLeft};
animation-duration: .4s;
animation-fill-mode: forwards;
`
console.log("props is equal to false and" + props.isToggled);
} else {
console.log("nothing to see here");
}
}}
`;
export default MenuDrawer;
````````````
And this is my react component code.
```````````
class MenuToggle extends React.Component{
constructor(){
super();
this.state = {
toggled: null
};
//console.log("toggled is equal to:", this.state.toggled);
}
render(){
//console.log("toggled is equal to:", this.state.toggled);
const handleToggle = () => {
if(!this.state.toggled)
this.setState({
toggled: true
});
if(this.state.toggled === false){
this.setState({
toggled: true
});
//console.log("toggled is equal to:", this.state.toggled);
}else if(this.state.toggled === true){
this.setState({
toggled: false
});
//console.log("toggled is equal to:", this.state.toggled);
}
}
return(
<div>
<MenuIcon onClick={handleToggle} isToggled={this.state.toggled}>
<img src={QueenCityMenu} alt="icon" />
</MenuIcon>
<div>
<MenuDrawer isToggled={this.state.toggled}>
<MenuItems isToggled={this.state.toggled}>
<MenuItem isToggled={this.state.toggled}>Home</MenuItem>
<MenuItem isToggled={this.state.toggled}>About</MenuItem>
<MenuItem isToggled={this.state.toggled}>Services</MenuItem>
<MenuItem isToggled={this.state.toggled}>Contact</MenuItem>
</MenuItems>
</MenuDrawer>
</div>
</div>
);
}
}
export default MenuToggle;
理想的最终结果是在切换菜单时显示“slideRight”动画。这将导致抽屉向右滑出。当菜单关闭时,应该播放“slideLeft”动画。这将导致抽屉向后滑动。
理想情况下,抽屉不应在加载时或任何其他时间滑出,除非在打开/关闭菜单时。
我很感激任何帮助!
解决方案
因为你只改变了animation-name
使用三元运算符。像animation-name: ifToggle ? 'slideRight' : 'slideft'
我看不到你在哪里传递slideRight
或slideLeft
变量,应该是这个props.slideRight
吗?
const MenuDrawer = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100vh;
background-color: #1c1c1c;
animation-name: ${ths.pros => props.isToggled ? ${slideRight} : ${slideLeft}};
animation-duration: .4s;
nimation-fill-mode: forwards;
`;
像这样更改您的返回方法,以默认停止播放动画。
return (
<div>
<MenuIcon onClick={handleToggle} isToggled={this.state.toggled}>
<img src={QueenCityMenu} alt="icon" />
</MenuIcon>
<div>
{ this.state.toggled !== null &&
<MenuDrawer isToggled={this.state.toggled}>
<MenuItems isToggled={this.state.toggled}>
<MenuItem isToggled={this.state.toggled}>Home</MenuItem>
<MenuItem isToggled={this.state.toggled}>About</MenuItem>
<MenuItem isToggled={this.state.toggled}>Services</MenuItem>
<MenuItem isToggled={this.state.toggled}>Contact</MenuItem>
</MenuItems>
</MenuDrawer>
}
</div>
</div>
);
推荐阅读
- for-loop - 在循环上需要帮助以使用 awk 平均成绩。输出为每个学生打印相同的成绩
- git-bash - 尽管目录存在并且我似乎有写权限,但 mkdir 失败
- woocommerce - 从属性中获取所有变体
- mysql - 查询 mysql 加入两个表并显示第二个的特定表
- ssl - 当 ISP 阻止端口 80 和 443 时,如何为我的私人服务器使用 Let's Encrypt?
- php - Auth 在 Laravel 的中间件中不起作用
- x86 - 在最近的英特尔上,拆分行/页面存储是否需要两个存储缓冲区条目?
- javascript - 显示/隐藏脚本在第一次单击时不起作用,但在之后起作用
- python - TypeError:需要一个整数(获取类型元组)日期时间 Python
- c# - 控制台应用程序的打印方式与在线编译器不同