JSX 条件渲染未按预期工作

Question

我在使用条件 jsx 语句时遇到问题，除非我调整 window 的大小，否则元素无法正确显示。 注意：它在开发模式下工作正常。 但构建后无法正常显示。

我正在尝试获取它，以便在桌面视图和移动菜单中显示一些导航链接（如果在移动视图中）。

我的主要导航包装组件是这个 -

const Nav = ({ image, branding, links, blog }) => {
    const [ size, setSize ] = useState(
        typeof window !== 'undefined' ? window.innerWidth : 1000
    );

    const handleSizeChange = (e) => {
        setSize((state) => e.target.innerWidth);
    };

    useEffect(
        () => {
            window.addEventListener('resize', (e) => handleSizeChange(e));
        },
        [ size ]
    );

    console.log(size);

    return (
        <NavWrapper>
            <Branding>
                <Link to="/">{!!image && <img src={image.url} alt="img" />}</Link>
                <Link to="/">{branding}</Link>
            </Branding>
            {size < 850 ? (
                <MobNav links={links} blog={blog} />
            ) : (
                <NavLinks links={links} />
            )}
        </NavWrapper>
    );
};

这应该给我这个布局 -

但相反，我得到了这个布局（直到我将 window 调整为桌面并返回移动） -

这是我的 NavLinks 组件 -

const NavLinks = ({ links }) => {
    return (
        <NavLinksWrapper>
            {links.map((link) => {
                return (
                    <NavLink key={link.link._meta.uid}>
                        <Link to={`/${link.link._meta.uid}`}>{link.label}</Link>
                    </NavLink>
                );
            })}
        </NavLinksWrapper>
    );
};

这是 BottomMobNav 组件 -

const BottomMobNav = ({ links, socialMedia, contact }) => {
    const [ open, setOpen ] = useState(false);
    const newLinks = [ { label: 'Home', link: { _meta: { uid: '/' } } }, ...links ];
    return (
        <MobNavWrapper>
            <div className="menu" style={{ left: open ? '0' : '-150%' }}>
                <MenuWrapper>
                    {newLinks.map((e, i) => {
                        if (e.label.toLowerCase() !== 'contact') {
                            return (
                                <Link to={`/${e.link._meta.uid}`} key={'mobNav ' + i}>
                                    <li
                                        style={{ height: `${75 / links.length}%` }}
                                        onClick={() => setOpen((state) => !state)}>
                                        {e.label}
                                    </li>
                                </Link>
                            );
                        }
                    })}
                </MenuWrapper>
            </div>
            <div className="icons">
                <i
                    className={`fa ${open ? 'fa-close' : 'fa-bars'} fa-2x`}
                    onClick={() => setOpen((state) => !state)}
                />
                <a href="https://www.google.com">
                    <i
                        className="fa fa-facebook-official fa-2x"
                        onClick={() => setOpen((state) => false)}
                    />
                </a>
                <Link to="/contact">
                    <i
                        className="fa fa-envelope fa-2x"
                        onClick={() => setOpen((state) => false)}
                    />
                </Link>
            </div>
        </MobNavWrapper>
    );
};

我不明白为什么它会创建 Navlinks 组件然后将 bottomMobNav 组件放入其中。

任何帮助，将不胜感激。 谢谢！

Answer 1

使用效果选项数组应该是空的，只能在初始化时运行，你也应该在卸载时删除这个监听器。

useEffect(
        () => {
            const listener  = (e) => handleSizeChange(e);
            window.addEventListener('resize', listener);
            return function(){ window.removeEventListener('resize', listener)   }
        },
        []
    );

Answer 2

我设法通过删除所有 js 并使用 css 媒体查询简单地处理显示来解决此问题。