어떤 조건으로 구성 요소를 렌더링하려면 어떻게 코드를 작성합니까?

다음은 마이웨이입니다.

TypeScript 친화적입니다!

 const If = <T extends string>(props: { 
   type: T, 
   [key in T]: ReactNode, 
   else: ReactNode 
 }) => {
   return <>{props[props.type] || props.else}</>
 }

용법

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>} 
   />
 )