Как мне вернуть две функции в функцию, которая рендерится как две компоненты в реакции вместо второй функции, перезаписывая первую

Question

Я использую условный рендеринг для рендеринга различных элементов в моем заголовке реагирования на основе URL или, если пользователь вошел в систему. В моем возврате по умолчанию я хочу отобразить две кнопки рядом, вместо этого появляется только вторая кнопка. Как мне это исправить?

const NavHeader = () => {
    const { location } = useSelector(state => state.router);
    const { authenticated } = useSelector(state => state.signIn);

    const menuItem = (linkPath, text, type) => (
        <Item className="header-item">
            <Button type="primary" ghost={type}>
                <Link to={linkPath}>
                    {text}
                </Link>
            </Button>
        </Item>
    );

    const renderMenuItem = ({ pathname }) => {
        if (pathname === '/signup') {
            return menuItem('/signin', SIGNIN, false);
        }
        if (pathname === '/signin') {
            return menuItem('/signup', SIGNUP, true);
        }
        if (authenticated) {
            return menuItem('/dashboard', GO_TO_DASHBOARD, false);
        }
        return (
            menuItem('/signin', SIGNIN, false)
            && menuItem('/signup', SIGNUP, true)
        );
    };

    return (
        <Header>
            <Link to="/" className="left-menu">
                <img src={Logo} height="60px" alt="NeoNatar Logo" />
            </Link>
            <Menu className="right-nav" mode="horizontal">
                {renderMenuItem(location)}
            </Menu>
        </Header>
    );
};

Answer 1

Вы можете вернуть массив или фрагмент, содержащий оба.

Массив:

return [
    menuItem('/signin', SIGNIN, false),
    menuItem('/signup', SIGNUP, true)
];

Фрагмент:

return (
    <React.Fragment>
        {menuItem('/signin', SIGNIN, false)}
        {menuItem('/signup', SIGNUP, true)}
    </React.Fragment>
);

Другой способ использования фрагмента в современных версиях Вавилона:

return (
    <>
        {menuItem('/signin', SIGNIN, false)}
        {menuItem('/signup', SIGNUP, true)}
    </>
);

---

То, что вы не работали, потому что результатом оператора && является значение только один его операндов. Он оценивает свой левый операнд и, если это значение ложно, принимает это значение в качестве результата; в противном случае он оценивает свой правый операнд и принимает это значение в качестве результата. В вашем случае, поскольку menuItem возвращает объект, это правда, поэтому второй вызов menuItem был выполнен, и его результат был результатом выражения &&.