От автора: любая используемая для 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/
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.