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

Условный рендеринг в React позволяет вам выводить компоненты в зависимости от определенных условий. Это полезно, когда вы хотите динамически изменять отображение на основе состояния или пропсов компонента.

Использование условий для рендеринга компонентов:

• Использование оператора if:

import React from 'react';

function ConditionalRenderingExample({ condition }) {
  if (condition) {
    return <p>Выполняется если условие верно.</p>;
  } else {
    return <p>Выполняется если условие неверно.</p>;
  }
}

• Использование оператора && для условных операций:

import React from 'react';

function ConditionalRenderingExample({ condition }) {
  return condition && <p>Выполняется если условие верно.</p>;
}

Тернарные операторы для условного рендеринга:

import React from 'react';

function ConditionalRenderingExample({ condition }) {
  return (
    <div>
      {condition ? (
        <p>Выполняется если условие верно.</p>
      ) : (
        <p>Выполняется если условие неверно.</p>
      )}
    </div>
  );
}

В этом примере используется тернарный оператор для более компактного условного рендеринга. Если condition истинно, то будет отрендерен первый абзац, иначе - второй.

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