Создавайте собственные компоненты для использования с 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 и о том, чего можно достичь с его помощью (Состав, улучшения, ссылки)