Условный рендеринг в React

В React вы можете использовать условные операторы JavaScript для динамического рендеринга компонентов или элементов.

Ниже приведены несколько распространённых методов обработки условного рендеринга в React:

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

Используйте операторы if в методе render или в возвращаемом значении функциональных компонентов, чтобы решить, что рендерить.

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;

    if (isLoggedIn) {
      content = <h1>С возвращением!</h1>;
    } else {
      content = <h1>Пожалуйста, зарегистрируйтесь.</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. Использование тернарного оператора

В JSX можно использовать тернарный оператор для краткого условного рендеринга.

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>С возвращением!</h1> : <h1>Пожалуйста, зарегистрируйтесь.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. Использование логического оператора AND (&&)

В JSX вы можете использовать логический оператор AND для условного рендеринга. Если условие истинно, отображается следующий элемент.

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn && <h1>С возвращением!</h1>}
      {!isLoggedIn && <h1>Пожалуйста, зарегистрируйтесь.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. Использование операторов switch

Когда нужно обработать несколько условий, можно использовать оператор switch в методе render.

Пример

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;

    switch (userRole) {
      case 'admin':
        content = <h1>Добро пожаловать,, администратор!</h1>;
        break;
      case 'user':
        content = <h1>Добро пожаловать, Пользователь!</h1>;
        break;
      case 'guest':
        content = <h1>Добро пожаловать, Гость!</h1>;
        break;
      default:
        content = <h1>Кто вы?</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);

Итог

  • ifинструкция: подходит для использования вrenderметодах или возвращаемом значении функциональных компонентов для определения содержимого рендеринга.
  • тернарный оператор: подходит для краткого условного рендеринга в JSX.
  • логическое И (&&) оператор: подходит для условного рендеринга в JSX. Когда условиеtrueто отрендерить элемент.
  • switchинструкция: подходит для обработки нескольких условий и рендеринга различного содержимого.
Другие расширения