Советы по условному рендерингу компонентов

Как написать код, если вы хотите отрисовать компонент по каким-то условиям?

Ниже приведен мой способ.

Он дружелюбен к 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>} 
   />
 )

Ввести полноэкранный режим Выйти из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий