如何在与 <Menu/> 相同的行上渲染组件？

问题描述

我正在尝试将一个表示为登录按钮的组件嵌入到导航菜单的同一行中。这是该组件：

SignInButton.tsx

function handleLogin(instance: IPublicclientApplication) {
    instance.loginPopup(loginRequest).catch(e => {
        console.error(e);
    });
}

/**
 * Renders a button which,when selected,will open a popup for login
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    return (
        <Button primary={true} className="ml-auto" onClick={() => handleLogin(instance)}>Login</Button>
    );
}

下面是我试图用 kendo-react-ui 实现但在 reactstrap 中实现的片段：

我尝试过类似以下的方法：

<Menu onSelect={onSelect}>
    <MenuItem text="Home" data={{ route: "/" }} />
    <MenuItem text="Counter" data={{ route: "/counter" }} />
    <MenuItem text="Users" data={{ route: "/users" }} />
    {SignInButton}
    // OR
    <SignInButton />
</Menu>

但按钮永远不会出现。似乎只有 MenuItem 会在 Menu 中呈现。如果我将 <SignInButton/> 放在 </Menu> 之后，那么它不会停留在同一行，即使我用 bootstrap row 告诉它； Menu 始终占据整行。

如何使用 kendo-react-ui 实现这一目标？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）