reactjs - 如何在同一行渲染组件?

Question

我试图让一个表示为登录按钮的组件嵌入到与导航菜单相同的行中。这是该组件：

登录按钮.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's 被呈现在Menu. 如果我把它放在<SignInButton/>后面，</Menu>那么即使我用 bootstrap 告诉它，它也不会留在同一行row；Menu总是占据整行。

我怎样才能做到这一点kendo-react-ui？