如何在React中返回两个函数的组件而不是第二个函数覆盖第一个函数？

Question

我正在使用条件渲染来根据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>
    );
};

- Ada

Answer 1

你可以返回包含数组或片段的结果。

数组：

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

片段：

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

在现代版本的Babel中，使用片段的另一种方式：

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

---

你之前的代码不起作用是因为 && 运算符的结果只是其操作数中的一个值。它会先计算左操作数，如果该值为假，则将该值作为运算结果；否则，它会计算右操作数，并将该值作为运算结果。在你的情况下，由于 menuItem 返回了一个对象，它是真值，因此第二个 menuItem 调用被执行，并且其结果成为了 && 表达式的结果。

- T.J. Crowder

---

我使用了数组，这样更简洁。谢谢。 - Ada

@Ada - 我也这么认为，我不清楚为什么我把它放在最后。 :-) 很高兴能帮到你！ - T.J. Crowder