Question

我在条件jsx语句中遇到麻烦，除非重新调整窗口大小，否则该元素不会正确显示。注意：在开发模式下可以正常工作。但是在构建后无法正确显示。

我正在尝试获取它，以便在桌面视图下可以显示一些导航链接，在移动视图下可以显示移动菜单。

我的主要nav包装器组件是这个-

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>
    );
};

哪个应该给我这个布局-

但是我得到的是这种布局（直到我将窗口的大小调整为桌面，然后再调整回移动设备）-

这是我的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

使用效果选项数组应为空，以便仅在init上运行，并且还应在卸载时删除此侦听器。

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

Answer 2

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

JSX条件渲染无法按预期工作

2 个答案: