How do you write a code if you want to render a component by some conditions?
Following is a my way.
It's TypeScript friendly!
const If = <T extends string>(props: {
type: T,
[key in T]: ReactNode,
else: ReactNode
}) => {
return <>{props[props.type] || props.else}</>
}
Usage
type UserRole = 'admin' | 'developer' | 'manager'
export const UserRoleView = (props: { role: UserRole }) => (
<If
type={props.role}
admin={<div>admin</div>}
developer={<div>developer</div>}
manager={<div>manager</div>}
else={<div>No role</div>}
/>
)
Top comments (0)