Javascript 如何在react中呈现为两个组件的函数中返回两个函数，而不是第二个函数覆盖第一个函数

我正在使用条件呈现来呈现基于url或用户登录的react标头中的不同元素。在我的默认返回中，我希望并排呈现两个按钮，而不是只显示第二个按钮。我该如何解决这个问题

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

const NavHeader=（）=>{
const{location}=useSelector（state=>state.router）；
const{authenticated}=useSelector（state=>state.signIn）；
常量菜单项=（链接路径、文本、类型）=>(
{text}
);
const renderMenuItem=（{pathname}）=>{
如果（路径名==='/signup'）{
返回菜单项（'/signin'，signin，false）；
}
如果（路径名==='/sign'）{
返回菜单项（'/signup'，signup，true）；
}
如果（已验证）{
返回菜单项（'/dashboard'，转到仪表板，false）；
}
返回(
菜单项（'/sign'，sign，false）
&&菜单项（'/signup'，signup，true）
);
};
返回(
{renderMenuItem（位置）}
);
};

您可以返回一个数组或包含这两者的片段

数组：

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

片段：

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

返回(
{menuItem（'/signin'，signin，false）}
{menuItem（'/signup'，signup，true）}
);

在巴别塔的现代版本中使用片段的另一种方法：

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

返回(
{menuItem（'/signin'，signin，false）}
{menuItem（'/signup'，signup，true）}
);

---

---

因为

&

运算符的结果是其操作数的一个的值，所以您所做的操作不起作用。它计算其左操作数，如果该值为falsy，则将该值作为其结果；否则，它计算其右操作数并将该值作为其结果。在您的例子中，由于

menuItem

返回一个对象，因此它是真实的，因此第二个

menuItem

调用已完成，其结果是

&

表达式的结果。

我使用了数组，它更干净。谢谢。@Ada-我也这么认为，我不清楚为什么我把它放在最后。：-）很高兴这有帮助！