Как условно добавить атрибуты к компонентам React?

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

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

React часто использует условные свойства для обеспечения динамического поведения. Однако большинство разработчиков не знакомы со всеми доступными техниками реализации.

Поэтому в этой статье мы рассмотрим множество подходов и рекомендуемых практик для использования условных атрибутов или реквизитов в React. Также ознакомьтесь с лучшими практиками использования крючков react.

var condition = true;
var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};
var component = <div { ...props } />;
Or its inline version
var condition = true;
var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Рендеринг условных атрибутов в React

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

Когда атрибуту в JavaScript присваивается значение false, DOM больше не будет включать этот конкретный атрибут. Атрибут будет удален из DOM, если ему присвоено значение null, undefined или false.

Пример

const required = true;
const disabled = false;
return <input type="text" disabled={required} required={disabled}/>;

if Statement

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

Login.js

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

App.js

import React, { Component } from "react";
import './App.css';
import Login from "./Login";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }
  render() {
    return (
      <div className="App">
        <h1>
          Welcome to, BOSC Tech Labs Private Limited
        </h1>
        <Login isLoggedIn={isLoggedIn} />
      </div>
    );
  }
}

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

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

condition ? exprIfTrue : exprIfFalse

Пример

import React from 'react';

export default function App() {

  const Flowers = [
    { name: 'Rose' },
    { name: 'Orchid' },
    { name: 'Hyacinth' },
    { name: 'Lily' },
    { name: 'Tulip' },
  ]


  const FlowersList = true

    return (
      <div>
      {
        FlowersList ? (
          <div>
          <ul>
            {Flowers.map(Flower => 
                <li>{Flower.name}</li>)}
          </ul> 
          </div>
: (
          <p>No Flowers</p>
        )
      }

Заключение

В этой статье были рассмотрены различные методы добавления условных атрибутов или реквизитов в React Components. В зависимости от ваших предпочтений, вы можете использовать любой из этих методов. Но прежде давайте подумаем, что нам нужно.

Если вы не хотите иметь дело с более сложным синтаксисом JavaScript, использование операторов «if» — самое простое решение.

Вы можете продолжать использовать традиционное «if», если сложность и читабельность кода не являются проблемой.