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 媒體查詢簡單地處理顯示來解決此問題。