Как настроить компоненты из библиотеки React

Как настроить компоненты из библиотеки React

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

У нас есть 2 варианта:

Написать компонент самостоятельно с нуля

Настроить сторонние компоненты

Что выбрать, зависит от компонента и ситуации, в которой вы находитесь.

По-видимому, некоторые компоненты не могут быть изменены, а некоторые требования к функциям неосуществимы. Но, как правило, настройка сторонних компонентов является менее трудоемким вариантом.

Прежде чем мы начнем

Мы собираемся настроить компонент response-bootstrap-typeahead. Вот исходный код, если вы хотите следовать всем действия.

1. Перезапись CSS

Это довольно просто. Просто выясните, что представляют собой классы CSS компонента, и замените их новым CSS.

Пример

Цель: добавить иконку раскрывающегося списка в поле ввода, чтобы оно выглядело как раскрывающийся список. Просто добавьте Font Awesome в index.html

и добавьте этот CSS в style.css

Демо

2. Компонент оболочки

Вы также можете изменить поведение по умолчанию стороннего компонента. Начните с создания компонента-оболочки CustomizedTypeahead и замените ним Typeahead.

Демо

Этот компонент оболочки пока не работает. Это просто props для компонента Typeahead. Мы собираемся настроить поведение компонента, внеся изменения в props.

Пример: настройка свойства по умолчанию

Цель: добавление свойства по умолчанию

Давайте начнем с самой простой настройки. Допустим, мы хотим, чтобы все CustomizedTypeahead включали свойство clearButton по умолчанию. Мы можем сделать это:

Это эквивалентно:

Мы создадим injectedProps и поместим все изменения props внутрь, чтобы сделать код управляемым.

Демо

Пример: изменение свойства

Цель: отсортировать все варианты по алфавиту

Мы получаем options, который является массивом объектов, и labelKey, который указывает, что метка вариантов должна быть optionObject[labelKey]. Наша цель — сортировка optionObject[labelKey] по алфавиту. Мы можем сделать это, используя Array.prototype.sort() для сортировки массива options.

Таким образом, optionsin в injectedProps будет перезаписывать оригинал options в props. Вот как мы можем отсортировать все варианты по алфавиту по умолчанию.

Демо

Пример: перехват прослушивателей событий

Цель: когда пользователь выбирает вариант, если он выбрал одновременно “California” и “Texas”, вывести предупреждение и отменить выбор (только для этой демо-версии).

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

Обратите внимание на if(onChange) onChange(selectedOptions);. Это гарантирует, что оригинальный прослушиватель события onChange продолжает работать после того, как мы его перехватим.

Вот что мы сделали в коде выше:

Мы создали функцию onChange, которая имеет ту же структуру, что и функция по умолчанию onChange. Это функция, которая получает массив выбранных вариантов.

Мы просматриваем выбранные варианты и проверяем, действительны ли они.

Если это не так, выводим предупреждение и очищаем ввод

Запускаем оригинальный прослушиватель событий onChange

Демо

3. Изменение исходного кода

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

Найти другую библиотеку компонентов

Написать собственный компонент с нуля

Изменить исходный код компонента

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

Некоторые пакеты используют разные языки, такие как CoffeeScript или Typescript. Если вы не знаете язык, вы не знаете, как его редактировать.

Изучение исходного кода и определение места размещения вашей модификации может занять много времени.

Вы можете непреднамеренно сломать некоторую часть пакета.

Когда пакет обновится, вам нужно будет применить обновление вручную.

Если вы решили продолжить и внести некоторые изменения в исходный код, вот как это сделать.

Форк репозитория Github. В нашем примере перейдите по адресу https://github.com/ericgio/react-bootstrap-typeahead и откройте репозиторий в своей учетной записи GitHub.

Клонируйте репозиторий на свою машину

Сделайте модификацию

Вставьте репозиторий в свою учетную запись GitHub

Установите свой репозиторий как зависимость

После того, как вы откроете репозиторий, URL вашего репозитория GitHub должен быть следующим https://github.com//react-bootstrap-typeahead. Вы можете установить это git-репо как зависимость, выполнив команду:

npm i https://github.com/<your GitHub username>/react-bootstrap-typeahead

После установки вы должны увидеть в package.json следующее:

"dependencies": { "react-bootstrap-typeahead": "git+https://github.com/<your github username>/react-bootstrap-typeahead.git" }

Заключение

Мы рассмотрели три способа настройки сторонних компонентов React.

Перезапись CSS

Использование компонента оболочки

Изменение исходного кода

Надеюсь, это облегчит вашу жизнь. В то же время давайте все уделим минуту и поблагодарим создателей / участников ресурсов с открытым исходным кодом. Без этих пакетов мы не смогли бы двигаться так же быстро, как сегодня. Какой у вас опыт работы со сторонними библиотеками компонентов? Какие еще методы вы бы использовали для их настройки? Напишите комментарий!

Автор: Jacob Goh

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.