Styled-Components 中的 If/Else 语句不注入 css 代码

Question

我正在使用 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”动画。这将导致抽屉向后滑动。

理想情况下，抽屉不应在加载时滑出或在菜单打开/关闭时以外的任何其他时间滑出。

感谢您的帮助！

Answer 1

由于您只更改 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>

);