Полезные видео о фронтенде. Подпишись на Rutube

Работа с CSS модулями в React: лучшие практики и примеры

месяц назад·2 мин. на чтение

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

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

Именование классов и файлов

CSS модули позволяют автоматически генерировать уникальные имена классов для каждого компонента. Чтобы сделать код более понятным и поддерживаемым, рекомендуется использовать осмысленные имена классов и файлов, отражающие их назначение. Например, если у вас есть компонент Button, вы можете назвать его стилевой файл Button.module.css.

Использование локальных и глобальных стилей

CSS модули позволяют определить локальные стили для конкретного компонента, а также использовать глобальные стили для всего приложения. Такой подход позволяет создавать переиспользуемые стили и управлять ими более эффективно. Например, вы можете определить общие стили для кнопок в глобальном файле стилей, а затем использовать локальные стили для конкретного компонента Button, если необходимы дополнительные или измененные стили.

Подключение CSS модулей в React-компонентах

Чтобы использовать CSS модули в функциональных компонентах React, вы можете импортировать стили с помощью конструкции import и применить их к элементам JSX с помощью атрибута className. Например, если у вас есть стилевой файл Button.module.css c классом button, вы можете импортировать его и применить к кнопке следующим образом:

import React from "react";
import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

Использование динамических классов

CSS модули также поддерживают динамическое добавление классов в зависимости от определенных условий. Например, если вы хотите добавить класс active к кнопке, если она находится в активном состоянии, вы можете использовать стандартный оператор if/else внутри функционального компонента для определения значения атрибута className:

import React, { useState } from "react";
import styles from "./Button.module.css";

const Button = () => {
  const [isActive, setIsActive] = useState(false);

  const handleButtonClick = () => {
    setIsActive(!isActive);
  };

  return (
    <button
      className={`${styles.button} ${isActive ? styles.active : ""}`}
      onClick={handleButtonClick}
    >
      Click me
    </button>
  );
};

export default Button;

Наследование стилей

CSS модули позволяют наследовать стили других классов, что упрощает повторное использование существующих стилей. Например, вы можете определить базовый класс base с общими стилями для всех кнопок, а затем создать новый класс button с дополнительными стилями:

/* Button.module.css */

.base {
  /* общие стили для всех кнопок */
}

.button {
  composes: base;
  /* дополнительные стили для кнопок */
}

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

Frontend React

Как передать компонент в качестве пропса в React

2 года назад·4 мин. на чтение

Существует множество способов передать компонент в качестве пропса

Существует множество способов передать компонент в качестве пропса, например, специальный проп children, и паттерн render prop. О них вы можете узнать в видео “Паттерн Render Props в ReactJS”. В случае с render props мы передаем функцию, которая возвращает компонент. В этой статье рассмотрим как передать просто компонент в качестве пропса. В этой статье мы увидим простую технику, которая позволяет писать удобные настраиваемые компоненты с помощью простых API, просто используя основные строительные блоки React - компоненты. Опытный React разработчик использует эту технику естественным образом, но новичку сложно понять этот механизм.

Переизбыток пропсов

Иногда в компонент приходится передавать огромное количество пропсов для того чтобы настроить более мелкие вложенные компоненты, из которых состоит ваш компонент. Возникает переизбыток пропсов. Давайте посмотрим на это на примере. Предположим, есть компонент Alert с Button внутри.

const Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>;

const Alert = ({ children, onAccept }) => (
  <div className="alert">
    <div className="alert-header">
      <h1>Alert!</h1>
    </div>
    <div className="alert-content">{children}</div>
    <div className="alert-footer">
      <Button onClick={onAccept}>Ok</Button>
    </div>
  </div>
);

<Alert onAccept={() => {}}>Attention!</Alert>

Что вы можете сделать, чтобы настроить внутренний Button? Если вы новичок в React вы, вероятно, думаете, что правильный способ - это передать проп.

const Alert = ({ children, acceptMessage = "Ok", onAccept }) => (
  <div className="alert">
    <div className="alert-header">
      <h1>Alert!</h1>
    </div>
    <div className="alert-content">{children}</div>
    <div className="alert-footer">
      <Button onClick={onAccept}>{acceptMessage}</Button>
    </div>
  </div>
);


<Alert acceptMessage="Understood!" onAccept={() => {}}>
  Attention!
</Alert>

Все верно, но что произойдет, если мы будем иметь дело с компонентом Confirm с двумя кнопками? Вам нужно дублировать пропсы и иметь некоторые префиксы, чтобы избежать конфликтов имен пропсов.

const Confirm = ({ children, acceptMessage = "Ok", rejectMessage = "Cancel", onAccept, onReject }) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">
      <Button onClick={onAccept}>{acceptMessage}</Button>
      <Button onClick={onReject}>{rejectMessage}</Button>
    </div>
  </div>
);


<Confirm acceptMessage="Yep" rejectMessage="Nope" onAccept={() => {}} onReject={() => {}}>
  You sure?
</Confirm>

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

Улучшение. Вложенные пропсы

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

const Confirm = ({
  children,
  onAccept,
  onReject,
  acceptButton = {
    message: "Ok",
    className: "accept-btn",
  },
  rejectButton = {
    message: "Cancel",
    className: "cancel-btn",
  },
}) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">
      <Button className={acceptButton.className} onClick={onAccept}>
        {acceptButton.message}
      </Button>
      <Button className={rejectButton.className} onClick={onReject}>
        {rejectButton.message}
      </Button>
    </div>
  </div>
);

<Confirm
  acceptButton={{ message: "Yep", className: "accept-btn" }}
  rejectButton={{ message: "Nope", className: "reject-btn" }}
  onAccept={() => {}}
  onReject={() => {}}
>
  You sure?
</Confirm>

Это исправляет конфликты, но все становится сложнее. Что произойдет, если я захочу переопределить только один вложенный проп? Чтобы сделать это, нам нужно вручную объединить пропсы со значениями по умолчанию. И что произойдет, если Button также содержит Icon? Следует ли использовать пару новых пропсов (acceptButtonIcon, rejectButtonIcon)? Должны ли вы вкладывать их в существующие пропсы (acceptButton.icon)? Типы или prop types будет очень сложно читать.

Другой подход. Render props

Render props это один из способов сделать ваши компоненты действительно настраиваемыми, вместо того, чтобы добавлять массу пропсов. Давайте попробуем. Напишем три разные версии компонента Confirm, который принимает рендер пропсы.

Версия 1. По одному рендер пропсу для каждой кнопки

В первой версии в компоненте Confirm добавим по одному рендер пропсу для каждой кнопки:

const Confirm = ({
  children,
  onAccept,
  onReject,
  renderAcceptButton = onAccept => (
    <Button className="accept-btn" onClick={onAccept}>
      OK
    </Button>
  ),
  renderRejectButton = onReject => (
    <Button className="reject-btn" onClick={onReject}>
      Cancel
    </Button>
  ),
}) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">
      {renderAcceptButton(onAccept)}
      {renderRejectButton(onReject)}
    </div>
  </div>
);

<Confirm
  renderAcceptButton={onAccept => (
    <Button className="accept-btn" onClick={onAccept}>
      Yep
    </Button>
  )}
  renderRejectButton={onReject => (
    <Button className="cancel-btn" onClick={onReject}>
      Nope
    </Button>
  )}
>
  You sure?
</Confirm>

Версия 2. Один рендер проп для всех кнопок

Вторая версия - это один рендер проп для всех кнопок.

const Confirm = ({
  children,
  onAccept,
  onReject,
  renderButtons = (onAccept, onReject) => (
    <>
      <Button className="accept-btn" onClick={onAccept}>
        OK
      </Button>
      <Button className="reject-btn" onClick={onReject}>
        Cancel
      </Button>
    </>
  ),
}) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">{renderButtons(onAccept, onReject)}</div>
  </div>
);

<Confirm
  renderButtons={(onAccept, onReject) => (
    <>
      <Button className="accept-btn" onClick={onAccept}>
        Yep
      </Button>
      <Button className="cancel-btn" onClick={onReject}>
        Nope
      </Button>
    </>
  )}
>
  You sure?
</Confirm>

Версия 3. Один рендер проп для всех подкомпонентов

И, наконец, рендер проп для всего компонента:

const Confirm = ({
  children,
  onAccept,
  onReject,
  render = (onAccept, onReject, children) => (
    <div className="confirm">
      <div className="confirm-header">
        <h1>Confirm</h1>
      </div>
      <div className="confirm-content">{children}</div>
      <div className="confirm-footer">
        <Button className="accept-btn" onClick={onAccept}>
          OK
        </Button>
        <Button className="reject-btn" onClick={onReject}>
          Cancel
        </Button>
      </div>
    </div>
  ),
}) => render(onAccept, onReject, children);

<Confirm
  render={() => {
    // компонент, который появится внутри `Confirm`
  }}
>
 You sure?
</Confirm>

Последний вариант своего рода крайность. Рендер пропсы настолько мощный, насколько это возможно, но он также имеет свои нюансы. Они позволяют изменить способ рендеринга компонента, но повторно использовать «значения по умолчанию» непросто. Это зависит от того, что визуализирует ваш рендер проп. В предыдущих примерах мы видели три варианта, каждый из которых обеспечивает большую гибкость, но меньшую возможность повторного использования «значений по умолчанию». Однако этот подход может показаться излишним, когда мы просто хотим настроить текст кнопок Alert/Confirm.

Просто передать компонент

const Confirm = ({
  children,
  onAccept,
  onReject,
  acceptButton = <Button>Ok</Button>,
  rejectButton = <Button>Cancel</Button>,
}) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">
      {React.cloneElement(acceptButton, { className: "accept-btn", onClick: onAccept })}
      {React.cloneElement(rejectButton, { className: "reject-btn", onClick: onReject })}
    </div>
  </div>
);

<Confirm
  acceptButton={<Button>Yep</Button>}
  rejectButton={<Button>Nope</Button>}
  onAccept={() => {}}
  onReject={() => {}}
>
  You sure?
</Confirm>

Этот API гораздо более естественен. Это один из тех случаев, когда cloneElement является правильным инструментом. Если вам интересно, почему мы всегда передаем обработчики, когда в некоторых случаях имеет смысл просто использовать их напрямую, вы правы. В данном случае это не обязательно.

<Confirm
  acceptButton={<Button onAccept={() => {}}>Yep</Button>}
  rejectButton={<Button onReject={() => {}}>Nope</Button>}
>
  You sure?
</Confirm>

Frontend React