Создавайте собственные компоненты для использования с React.js и Next.js за 5 минут

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

Как говорится в официальной документации React:

Компонент более высокого порядка (HOC) - это продвинутая технология в React для повторного использования логики компонентов. По сути, HOC не являются частью React API. Это шаблон, который вытекает из композиционной природы React.
Конкретно, компонент более высокого порядка - это функция, которая принимает компонент и возвращает новый компонент.

React использует HTML для создания пользовательского интерфейса нашего приложения. С помощью HOC мы можем расширить эту функциональность и использовать не только ‹div›, ‹p› и ‹h1›, но и настраиваемые компоненты, которые мы создаем, например ‹Menu›, ‹NavigationBar›, ‹Carousel›. Компоненты высокого порядка также позволяют нам отправлять параметры этим компонентам, настраиваемые параметры, которые мы определим. Базовым примером может быть ‹NavigationBar isLogged = {} /›.

Давайте создадим наш первый компонент.

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

Я предпочитаю сохранять свои компоненты в отдельной папке компоненты. Я перейду в папку своих компонентов, а затем мы создадим новый файл под названием ColorableContainer.js.

import React from 'react';
export default class ColorableContainer extends React.Component {
    
    render() {
        return (
            <div className='colorableContainer' style={{ backgroundColor: this.props.backgroundColor}} >
                {this.props.children}
            <style jsx>{`
                .colorableContainer {
                    width: 100%;
                    height: 40px;
                }
            `}</style>
            </div>
        )
    }
}

Итак, что мы здесь делаем?

Мы создаем класс (ColorableContainer), расширяющий React.Component (поскольку мы хотим использовать наш класс как компонент).
В нашей функции рендеринга мы возвращаем div с двумя разными типами стилей:
- style jsx: определение ширины и высоты статических переменных.
- Встроенный стиль: динамическое определение значения наших свойств для установки цвета фона. Мы используем this.props для доступа к отправляемым параметрам (‹Component prop1 = {propvalue} prop2 = {propvalue2} /›).

Наконец, мы оборачиваем все это в this.props.children. Это значение относится к компонентам, которые мы обернем нашим компонентом.

<Component>
  ...(children)...
</Component>

Теперь наш компонент готов к использованию. Мы можем импортировать его и использовать, определяя цвет фона и добавляя возможность добавлять внутренние элементы. Поскольку это только базовый подход, мы определяем фиксированную высоту, но, как мы видим, ее можно легко настроить.

Теперь мы можем импортировать его:

import ColorableContainer from '../components/ColorableContainer';

И новый может использовать его как новый компонент.

Обратите внимание, что следующий код взят из проекта Next.js, поэтому он может отличаться от проекта response.js.

import ColorableContainer from '../components/ColorableContainer';
export default function Home() {
  return (
    <div>
      <ColorableContainer backgroundColor={'rgb(0,255,0)'}/>
      <ColorableContainer backgroundColor={'red'}>
          <p>Test</p>
        </ColorableContainer>
        <style jsx>{`
            p {
              margin: 0;
            }
        `}</style>
    </div>
  )
}

При компиляции найдем наши 2 контейнера. Один с зеленым цветом фона (определен с помощью RGB) без внутреннего содержимого, а следующий с красным фоном, определяемым просто «красным» и внутренним абзацем.

Заключение

Это был лишь базовый и быстрый подход к компонентам более высокого порядка. Сама по себе это популярная тема, и команда React постоянно обновляет и добавляет новые функции. Я напишу больше о HOC и о том, чего можно достичь с его помощью (Состав, улучшения, ссылки)