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

Question

我正在使用条件渲染根据 url 或用户是否登录来渲染 react header 中的不同元素。在我的默认返回中，我想并排渲染两个按钮，而不是只显示第二个按钮。我该如何解决这个问题？

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

在现代版本的 Babel 中使用片段的另一种方法:

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

<小时/>

您所做的不起作用，因为 && 运算符的结果只是其操作数一个的值。它评估其左侧操作数，如果该值为假，则将该值作为结果；否则，它计算其右侧操作数并将该值作为结果。在您的情况下，由于 menuItem 返回一个对象，因此它是真实的，因此第二个 menuItem 调用已完成，其结果是 && 的结果表达。