Композиция компонентов в React

frontend01 октября 2020

React хорош тем, что позволяет делать композицию чего угодно. И есть не один способ добиться желаемого. Рассмотрим мой любимый: паттерн render-props. Он похож на hoc, но для меня субъективно удобнее и читаемее. Хотя всё, конечно, зависит от конкретной задачи. Итак...

Задача: реализовать группы чекбоксов, каждая со своим изолированным состоянием. Стилизация одного чекбокса зависит от состояния другого. Если выделены несколько элементов подряд, между ними нужно отрисовать линию, их соединяющую.

Решение: создать два компонента. Первым из которых будет сам чекбокс. Вторым — группа чекбоксов. Группа будет знать всё обо всех чекбоксах внутри себя и ничего о чекбоксах соседней группы.

Выглядит наша задумка следующим образом:

Приступим. Возьмём create-react-app в качестве каркаса приложения и classnames для стилизации.

$ npx create-react-app form-app
$ cd form-app
$ yarn add classnames

Структура приложения:

$ tree -L 3
.
├── package.json
├── public
├── src
│   ├── App.js
│   ├── components
│   │   ├── checkbox
│   │   │   ├── checkbox.css
│   │   │   └── checkbox.js
│   │   ├── checkbox-group
│   │   │   ├── checkbox-group.css
│   │   │   └── checkbox-group.js
│   │   └── index.js
│   └── index.js
└── yarn.lock

Для удобства импорт всех компонентов можно организовать из одного файла.

// components/index.js
import CheckBox from './checkbox/checkbox';
import CheckboxGroup from './checkbox-group/checkbox-group';

export {
  CheckBox,
  CheckboxGroup,
}

Идём от малого к большому. Сначала сам чекбокс.

import React, { useState, memo } from 'react';
import './checkbox.css';
const classNames = require('classnames');

const CheckBox = props => {
  const { name, label, isInGroup, isDisabled, handleChange } = props;

  // состояние чекбокса: отмечен или нет
  // сделаем так, чтобы начальное значение можно было передать извне
  const [isChecked, setIsChecked] = useState(props.isChecked);

  // изменение состояния
  // и вызов внешней функции handleChange при необходимости
  const toggleCheckbox = () => {
    if (isDisabled) return;

    handleChange({ isChecked: !isChecked, label, name });
    setIsChecked(!isChecked);
  };

  // динамическая стилизация
  // если isInGroup, то добавить класс-модификатор
  const checkboxClass = classNames({
    'checkbox': true,
    'checkbox_inGroup': isInGroup,
  });

  return (
    <label className="label">
      <input
        type="checkbox"
        className={checkboxClass}
        name={name}
        label={label}
        checked={!!isChecked}
        onChange={toggleCheckbox} />
      {name}
    </label>
  );
};

CheckBox.displayName = 'CheckBox';

export default memo(CheckBox);

Группа чекбоксов. Отдаёт дочерние компоненты через render-props.

import React, { useState, memo } from 'react';
import './checkbox-group.css';

const CheckboxGroup = props => {
  // копируем данные и начинаем их менять как захочется
  const [data, setData] = useState([...props.data]);

  // отдать всё, что приходит из props
  // и добавить флаг isChecked, который получим когда сработает метод onChange у чекбокса
  const toggleCheckboxes = checkbox => {
    setData([
      ...data.map(i =>
        i[props.name] === checkbox.name ? { ...i, isChecked: checkbox.isChecked } : i,
      ),
    ]);
  };

  // render-props!
  // передать данные и метод toggleCheckboxes чекбоксу
  return <div className="checkbox-group">{props.render(data, toggleCheckboxes)}</div>;
};

CheckboxGroup.displayName = 'CheckboxGroup';

export default memo(CheckboxGroup);

В примере приведены «плоские» данные. Но будьте осторожны при передаче структур с глубокой вложенностью. Копирование поверхностное (shallow comparison). Если нужно сделать глубокое — обратитесь к библиотекам, таким как ramda и не используйте JSON.parse(JSON.stringify(data))).

Осталось импортировать компоненты и передать данные.

import React from 'react';
import { CheckboxGroup, CheckBox } from './components';

const apartments = [
  { id: 'apartment-0', label: 'Гостевые дома' },
  { id: 'apartment-1', label: 'Отели' },
  { id: 'apartment-2', label: 'Базы отдыха и турбазы' },
];

function App() {
  return (
    <CheckboxGroup
      data={apartments} // данные
      // поле, по которому ищем чекбокс в группе (в данном случае по id)
      name="id"
      // получаем изолированное состояние и метод из группы чекбоксов
      render={(data, toggleCheckboxes) => (
        <React.Fragment>
          {data.map(({ id, label, isDisabled, isChecked }, index) => (
            <CheckBox
              key={id}
              name={id}
              label={label}
              isChecked={isChecked}
              isInGroup={isChecked && data[index - 1]?.isChecked}
              isDisabled={isDisabled}
              handleChange={toggleCheckboxes}
            />
          ))}
        </React.Fragment>
      )} />
  );
}

export default App;

Осторожно

Нужно быть аккуратным с render-props: предостережение.

Стилизация не относится к теме render-props'ов и для сокращения кода пропускается.

MacOS. ЛайфхакиАдаптивное меню на CSS