javascript - 反应条件渲染（移动视图和桌面视图）问题

Question

谁能帮帮我吗？当此代码在移动视图中加载时，它会显示桌面视图几毫秒，然后显示移动视图。有人可以更正我的代码吗？提前致谢。

class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           isLarge:true
        };
        this.updatePredicate = this.updatePredicate.bind(this);
    }

    componentDidMount() {    
        this.updatePredicate();
        window.addEventListener("resize", this.updatePredicate);
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.updatePredicate);
    }

    updatePredicate() {
         var size = window.innerWidth;
         if(size>767) {
             this.setState({ isLarge:true});
         } else {
             this.setState({ isLarge:false});
         }  
    }

    render() {
        const {isLarge} = this.state;   

        return (
            <div>
                {isLarge ? (<DesktopMenu 
                                categories={categories} 
                                menuOpen={menuOpen} 
                                openMenu={openMenu}/>) 
                         : (<MobileMenu 
                                categories={categories} 
                                menuOpen={menuOpen} 
                                openMenu=openMenu}/>)
                }
            </div>
        );
    }
}

标签： javascriptreactjsjsxreact-dom

Answer 1

默认情况下，您的状态isLarge设置为 true，因此即使对于这些毫秒，它也会呈现 DesktopView。

您可以使用值初始化您的状态undefined，而不是默认值。

    this.state = {
       isLarge: undefined
    };

然后检查值是否存在

    return (
        <>
        {isLarge === undefined ? "Loading" :
        <div>
            {
             isLarge ?
               <DesktopMenu categories={categories}
                            menuOpen={menuOpen}
                            openMenu={openMenu}
               />
              : 
               <MobileMenu categories={categories}
                           menuOpen={menuOpen}
                           openMenu={openMenu}
               />
            }
        </div>
     }
     </>
    );