Условный рендеринг — это важная концепция React, которая позволяет разработчикам контролировать видимость и поведение компонентов в зависимости от определенных условий. В сочетании с TypeScript он обеспечивает дополнительную безопасность типов и помогает выявить потенциальные ошибки во время разработки. В этой статье мы рассмотрим различные методы условного рендеринга в React с использованием TypeScript, а также приведем примеры кода, иллюстрирующие каждый подход.

Содержание:

1. Использование операторов if-else

2. Тройный оператор

3. Краткая оценка

4. Оператор Switch

5. Рендеринг на основе перечислений

6. Шаблон рендеринга реквизита

7. Компоненты высшего порядка (HOC)

8. Хуки React (useState и useEffect)

9. Контекстный API

10. Использование операторов if-else.
    Один из самых простых способов условной визуализации компонентов — использование операторов if-else. Вот пример:

import React from 'react';
function ConditionalRenderExample({ isLoggedIn }: { isLoggedIn: boolean }) {
  if (isLoggedIn) {
    return <div>Welcome, User!</div>;
  } else {
    return <div>Please log in to continue.</div>;
  }
}

1. Тернарный оператор:
   Тернарный оператор обеспечивает краткий способ условного рендеринга компонентов. Вот пример:

import React from 'react';
function ConditionalRenderExample({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn ? <div>Welcome, User!</div> : <div>Please log in to continue.</div>;
}

1. Краткая оценка:
   Концепцию краткой оценки можно использовать для условного рендеринга. Вот пример:

import React from 'react';
function ConditionalRenderExample({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn && <div>Welcome, User!</div>;
}

1. Оператор Switch:
   В некоторых случаях оператор переключателя может использоваться для условного рендеринга. Вот пример:

import React from 'react';
enum UserType {
  Admin = 'admin',
  User = 'user',
}
function ConditionalRenderExample({ userType }: { userType: UserType }) {
  switch (userType) {
    case UserType.Admin:
      return <div>Welcome, Admin!</div>;
    case UserType.User:
      return <div>Welcome, User!</div>;
    default:
      return null;
  }
}

1. Рендеринг на основе перечислений.
   Использование перечислений может обеспечить более читаемый и типобезопасный условный рендеринг. Вот пример:

import React from 'react';
enum UserType {
  Admin = 'admin',
  User = 'user',
}
function ConditionalRenderExample({ userType }: { userType: UserType }) {
  const userComponents: { [key in UserType]: JSX.Element } = {
    [UserType.Admin]: <div>Welcome, Admin!</div>,
    [UserType.User]: <div>Welcome, User!</div>,
  };
  return userComponents[userType] || null;
}

1. Шаблон реквизитов рендеринга.
   Шаблон реквизитов рендеринга позволяет компонентам принимать функцию в качестве реквизита, обеспечивая гибкий условный рендеринг. Вот пример:

import React from 'react';
type ConditionalRenderProps = {
  isLoggedIn: boolean;
  render: () => React.ReactNode;
};
function ConditionalRenderExample({ isLoggedIn, render }: ConditionalRenderProps) {
  return <div>{render()}</div>;
}
// Usage
<ConditionalRenderExample isLoggedIn={true} render={() => <div>Welcome, User!</div>} />;

1. Компоненты высшего порядка (HOC):
   Компоненты высшего порядка — это способ повторного использования логики компонента и включения условного рендеринга. Вот пример:

import React from 'react';
type ConditionalRenderProps = {
  isLoggedIn: boolean;
};
function withConditionalRender(WrappedComponent: React.ComponentType<ConditionalRenderProps>) {
  return function ConditionalRenderWrapper({ isLoggedIn, ...props }: ConditionalRenderProps) {
    if (isLoggedIn) {
      return <WrappedComponent {...props} />;
    } else {
      return null;
    }
  };
}
// Usage
const WelcomeMessage = withConditionalRender(({ isLoggedIn }) => (
  <div>Welcome, {isLoggedIn ? 'User' : 'Guest'}!</div>
));

1. Хуки React (useState и useEffect):
   Хуки React предоставляют мощный способ обработки состояния и выполнения условного рендеринга. Вот пример:

import React, { useState, useEffect } from 'react';
function ConditionalRenderExample() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    // Simulating login state update
    setIsLoggedIn(true);
  }, []);
  return isLoggedIn ? <div>Welcome, User!</div> : <div>Please log in to continue.</div>;
}

1. Context API:
   Context API позволяет передавать данные через дерево компонентов без явной передачи реквизитов. Вот пример:

import React, { createContext, useContext } from 'react';
type AuthContextValue = {
  isLoggedIn:boolean;
};
const AuthContext = createContext<AuthContextValue>({ isLoggedIn: false });
function ConditionalRenderExample() {
  const { isLoggedIn } = useContext(AuthContext);
  return isLoggedIn ? <div>Welcome, User!</div> : <div>Please log in to continue.</div>;
}
// Usage
<AuthContext.Provider value={{ isLoggedIn: true }}>
  <ConditionalRenderExample />
</AuthContext.Provider>

В этой статье мы рассмотрели несколько методов условного рендеринга в React с помощью TypeScript. Каждый подход имеет свои преимущества и может быть выбран исходя из конкретных требований вашего проекта. Используя эти методы, вы можете создавать динамичные и гибкие пользовательские интерфейсы, обеспечивая при этом безопасность типов и уменьшая количество потенциальных ошибок.