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

6 способов реализовать CR в React.js

Условный рендеринг кажется стандартным вопросом для проблем с кодом. Я помню, когда получил его на тесте. На самом деле я был приятно удивлен. Ну кто не умеет пользоваться условным рендерингом. Но сколько способов вы знаете?

Условный рендеринг в языке React - это способ рендеринга различных элементов или компонентов в зависимости от условия. Эта концепция часто применяется в следующих сценариях:

• Отображение внешних данных из API
• Отображение / скрытие элементов
• Переключение функций приложения
• Реализация уровней разрешений
• Аутентификация и авторизация

На простом примере, основанном на значении isLoggedIn в состоянии компонента, мы хотим иметь возможность отображать кнопку входа в систему, если пользователь не вошел в систему, и Logout другим способом.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
     <button>Login</button>
      <button>Logout</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

⚫ Если / иначе Статус

Оператор if/else позволяет нам указать, что конкретное действие будет происходить только при условии true, а также сделать что-то еще, если этого не произойдет.

// index.js
...
render() {
    let {isLoggedIn} = this.state;
    const renderAuthButton = ()=>{
      if(isLoggedIn){
        return <button>Logout</button>
      } else{
        return <button>Login</button>
      }
    }
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
        {renderAuthButton()}
      </div>
    );
  }
...

Множественные операторы возврата

В этом методе важно, чтобы компонент был простым. Для этого создадим еще один функциональный компонент под названием AuthButton:

// AuthButton.js
import React from "react";
const AuthButton = props => {
  let { isLoggedIn } = props;
  if (isLoggedIn) {
    return <button>Logout</button>;
  } else {
    return <button>Login</button>;
  }
};
export default AuthButton;

AuthButton возвращает различные элементы в зависимости от значения состояния, которое передается через свойства isLoggedIn. Таким образом, мы импортируем его в наш index.js и передаем соответствующее состояние, как показано ниже:

// index.js
...
import AuthButton from "./AuthButton";
...
  render() {
    let { isLoggedIn } = this.state;
    return (
      <div className="App">
      ...
        <AuthButton isLoggedIn={isLoggedIn} />
      </div>
    );
  }
...

⚫ Использование переменных элемента

// index.js
...
render() {
    let { isLoggedIn } = this.state;
    let AuthButton;
    if (isLoggedIn) {
      AuthButton = <button>Logout</button>;
    } else {
      AuthButton = <button>Login</button>;
    }
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
        {AuthButton}
      </div>
    );
  }
...

Как видите, мы условно присваиваем значения (компоненты) AuthButton, а затем нам нужно только аккуратно отрендерить его в нашем JSX.

⚫ Использование оператора Switch

Мы можем условно вернуть разную разметку из компонентов, используя оператор switch, где мы можем указать разметку для различных условий.

// AuthButton.js
import React from "react";
const AuthButton = props => {
  let { isLoggedIn } = props;
  switch (isLoggedIn) {
    case true:
      return <button>Logout</button>;
      break;
    case false:
      return <button>Login</button>;
      break;
    default:
      return null;
  }
};
export default AuthButton;

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

⚫ Тернарные операторы

Страшно звучит? Не беспокойтесь, вы видели это раньше, обещаю! Условный (тернарный) оператор - единственный оператор JavaScript, который принимает три операнда. Этот оператор часто используется как ярлык для оператора if. Я не знала, как мы это называем.

// index.js
...
render() {
    let { isLoggedIn } = this.state;
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
        {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
      </div>
    );
  }
...

⚫ Логический &&

Оценка короткого замыкания (так называется методика) - это метод, используемый для обеспечения отсутствия побочных эффектов во время оценки операндов в выражении.

// index.js
...
render() {
    let { isLoggedIn } = this.state;
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
        {isLoggedIn && <button>Logout</button>}
      </div>
    );
  }
...

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

⚫ Использование IIFE

IIFE (я немедленно я вызвал F функцию E сжатие) - это JavaScript. функция, которая запускается, как только она определена. Подробнее здесь.

//index.js
...
render() {
    let { isLoggedIn } = this.state;
    return (
      <div className="App">
        <h1>
          This is a Demo showing several ways to implement Conditional Rendering
          in React.
        </h1>
        {(function() {
          if (isLoggedIn) {
            return <button>Logout</button>;
          } else {
            return <button>Login</button>;
          }
        })()}
      </div>
    );
  }
...

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