我有两个React组件，据我所知，它们的设置完全相同。第一个是Navbar：

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
    Pick<T, Exclude<keyof T, Keys>> 
    & {
        [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
    }[Keys]

interface NavbarInterface {
    toggleSidebar: () => void,
    exclude: boolean,
    logoImg?: StaticImageData,
    logoText?: string,
    opacity: number
}

const NavBar = ({
    toggleSidebar,
    exclude,
    logoImg,
    logoText,
    opacity
}: RequireAtLeastOne<NavbarInterface, 'logoImg' | 'logoText'>) => {
    //code...
    return (
        <Nav alpha={opacity} scrolled={scrolled} exclude={exclude}>
            {/* more react elements */}
        </Nav>
    )
}

第二个是侧边栏：

interface SidebarInterface {
    exclude?: boolean,
    isOpen: boolean,
    toggle: () => void
}

const Sidebar = ({
    exclude,
    isOpen,
    toggle
}): SidebarInterface => {
    return (
        <SidebarContainer isOpen={isOpen} onClick={toggle}>
            {/* more react elements */}
        </SidebarContainer>
    )
}

谁能帮我弄清楚这是怎么回事？