如何在一个函数中返回两个函数，该函数在 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>
);
};

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调用已完成，其结果是&&表达式的结果。