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

Question

我正在使用 React.js 和 Styled-Components 设计滑出式菜单抽屉。我希望抽屉在切换按钮时滑出，在未切换时滑回。

在将 props 传递到我的样式化组件时，我能够通过使用一个简单的三元运算符来让它工作（见下文）。但是只要我的反应组件呈现并初始化它的状态，它就会滑出。

为了解决这个问题，我尝试添加一个 if/else 语句以确保它只会在 true/false 上滑出，而不是在 null/undefined 上也滑出。问题是现在它没有正确注入 CSS 。

此代码有效，但会在渲染 React 组件时滑出。（由于某种原因，反引号也没有在 Whosebug 中显示，但它们在那里。）

${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" 动画。这将导致抽屉向后滑动。

理想情况下，抽屉不应在加载时或除切换菜单外的任何其他时间滑出 on/off。

感谢任何帮助！

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 方法，以默认停止播放动画。

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>

);

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

If/Else statement in Styled-Components not injecting css code

reactjs