React.js 在 switch 语句中大于/小于答案

【问题标题】：React.js greater than/Less than in a switch statementReact.js 在 switch 语句中大于/小于
【发布时间】：2021-02-09 04:16:25
【问题描述】：

我已经采取了突破，在底部留下一个，重新排列了先出现的情况的顺序，并且还在大于/小于/等之间切换...与包括中断，它会遇到第一个或最后一个案例，具体取决于您使用的是“=”。

constructor (props) {
        super(props);
        this.state = { clicked: false, windowWidth: window.innerWidth };
        this.welcomeBtn = this.welcomeBtn.bind(this);
    }

    componentDidMount() {
        console.log(this.state.windowWidth);
        const windowCheck = window.innerWidth;
        this.setState({
            windowWidth: windowCheck
        });
    }
 welcomeBtn() {
        console.log(this.state.windowWidth);
        var windowWidthString = this.state.windowWidth;
        switch(true) {
            case (windowWidthString <= 300): 
                window.scrollTo({top: 100, behavior: 'smooth'});
            break;
            case (windowWidthString <= 350): 
                window.scrollTo({top: 1100, behavior: 'smooth'});
            break;
            case (windowWidthString <= 700): 
                window.scrollTo({top: 500, behavior: 'smooth'});
            break;
            case (windowWidthString <= 900): 
                window.scrollTo({top: 900, behavior: 'smooth'});
            break;
            case (windowWidthString <= 1100): 
                window.scrollTo({top: 1100, behavior: 'smooth'});
            break;
        }
    }
  render () {
        return(
            <div>
                <div id="welcomeMessageDiv">
                <h1 className="headTitle">Welcome</h1>
                <button onClick={this.welcomeBtn}>Learn More</button>
                </div>
                <Parallax y={[-20, 20]}>
                  <div>{stuff}<div>
                </Parallax>
                <div id="moreInfoDivHome">
                </div>
            </div>
        )
    }
}

【问题讨论】：

标签： reactjs switch-statement logical-operators

【解决方案1】：

你甚至不需要 switch 声明，if 就可以了：

 welcomeBtn() {
    console.log(this.state.windowWidth);
    var windowWidthString = this.state.windowWidth;

    if (windowWidthString <= 300) { 
        window.scrollTo({top: 100, behavior: 'smooth'});
    }
    else if (windowWidthString <= 350) {
        window.scrollTo({top: 1100, behavior: 'smooth'});
    }
    else if (windowWidthString <= 700) {
        window.scrollTo({top: 500, behavior: 'smooth'});
    }
    else if (windowWidthString <= 900) {
        window.scrollTo({top: 900, behavior: 'smooth'});
    }
    else if (windowWidthString <= 1100) {
        window.scrollTo({top: 1100, behavior: 'smooth'});
    }
    else {
        // handle edge case
    }
}

在这里使用if 有效，因为当我们遍历各种检查时，我们可以排除窗口宽度的值低于之前检查的值。

【讨论】：

谢谢，但这不是 switch 语句的重点，因此您不必编写多个“else if”。对我来说，使用许多 else if 代替 switch 语句似乎是一种不好的做法。
我也测试了这个解决方案，与 switch 语句有同样的问题。即使窗口宽度为 300 像素，解决方案仍会从顶部滚动 1100 像素，如最后一个 else if 语句所示。

【解决方案2】：

我确实找到了一个解决方案，虽然我觉得它不是很有说服力，但它确实按预期工作。如果确实存在，我仍然会寻求更好的解决方案。

welcomeBtn() {
        console.log(this.state.windowWidth);
        var windowWidthString = this.state.windowWidth;
        switch(true) {
            case (windowWidthString >= 300 && windowWidthString <= 499): 
                window.scrollTo({top: 100, behavior: 'smooth'});
            break;
            case (windowWidthString >= 500 && windowWidthString <= 699): 
                window.scrollTo({top: 300, behavior: 'smooth'});
            break;
            case (windowWidthString >= 700 && windowWidthString <= 899): 
                window.scrollTo({top: 500, behavior: 'smooth'});
            break;
            case (windowWidthString >= 900 && windowWidthString <= 1099): 
                window.scrollTo({top: 700, behavior: 'smooth'});
            break;
            case (windowWidthString >= 1100 && windowWidthString <= 2400): 
                window.scrollTo({top: 1100, behavior: 'smooth'});
            break;
        }
    }

【讨论】：

这远不如我的答案可取，因为它需要为每个条件明确写出完整的范围。
我同意，但是我测试了您的代码并遇到了与我之前对您的代码的评论中所述的原始 switch 语句相同的问题。